/* Crystal controls. Real generated glass material + existing Bootstrap glyphs. */
:root{
 --glass-material:url('/media/controls/glass-tile.webp');
 --glass-surface:color-mix(in srgb,var(--white) 84%,transparent);
 --glass-edge:color-mix(in srgb,var(--white) 78%,var(--line));
 --glass-shadow:color-mix(in srgb,var(--green) 18%,transparent);
 --glass-highlight:#fff9;
 --glass-radius:15px;
}
body.workspace[data-color-mode=dark]{
 --glass-surface:color-mix(in srgb,var(--white) 88%,transparent);
 --glass-edge:#ffffff32;--glass-highlight:#ffffff3d;--glass-shadow:#0004;
}
body :is(.btn,.text-btn,.icon-btn,.round-action,.appearance-shortcut,.language-trigger,.language-choice,.affinity-chip,.tabs button,.search-tabs button,.hero-slider-controls button,.chat-peer,.mood-picker button,.glass-pagination button){
 position:relative;isolation:isolate;min-height:44px;
 border:1px solid var(--glass-edge);border-radius:var(--glass-radius);
 background:var(--glass-surface);color:var(--ink);
 box-shadow:inset 0 1px 2px var(--glass-highlight),inset 0 -2px 3px #233f5618,0 4px 9px var(--glass-shadow);
 backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
 transition:box-shadow .18s ease,background-color .18s ease,transform .18s ease;
}
body :is(.btn,.text-btn,.icon-btn,.round-action,.appearance-shortcut,.language-trigger,.language-choice,.affinity-chip,.tabs button,.search-tabs button,.hero-slider-controls button,.chat-peer,.mood-picker button,.glass-pagination button)::before{
 content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border:12px solid transparent;
 border-image:var(--glass-material) 25% fill / 12px / 0 stretch;
 opacity:.38;mix-blend-mode:screen;
}
body :is(.btn,.text-btn){display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:10px 18px;font-size:12px;font-weight:600;text-decoration:none;white-space:normal;line-height:1.4}
body .btn:not(.secondary):not(.light):not(.glass-btn){background-color:color-mix(in srgb,var(--green) 88%,#000);border-color:color-mix(in srgb,var(--green) 64%,#fff);color:#fff;box-shadow:inset 0 1px 2px #fffb,inset 0 -3px 5px #0003,0 5px 12px var(--glass-shadow)}
body .btn:not(.secondary):not(.light):not(.glass-btn)::before{opacity:.12}
body.workspace[data-color-mode=dark] .btn:not(.secondary):not(.light):not(.glass-btn){color:#20252a}
body :is(.btn.secondary,.btn.light,.text-btn){background:var(--glass-surface);border-color:var(--glass-edge);color:var(--ink)}
body .btn.small{padding:8px 13px}
body :is(.icon-btn,.round-action){display:inline-flex;align-items:center;justify-content:center;min-width:44px;width:44px;height:44px;padding:9px;flex-shrink:0}
body :is(.btn,.text-btn,.icon-btn,.round-action)>.icon{display:inline-flex;align-items:center;justify-content:center;line-height:1;flex-shrink:0}
body .icon img{width:20px;height:20px;display:block}
body :is(.btn:not(.secondary):not(.light):not(.glass-btn))>.icon img{filter:brightness(0) invert(1)}
body.workspace[data-color-mode=dark] .btn:not(.secondary):not(.light):not(.glass-btn)>.icon img{filter:none}
body :is(.btn.secondary,.btn.light,.text-btn,.icon-btn,.round-action)>.icon img{filter:none}
body.workspace[data-color-mode=dark] :is(.btn.secondary,.btn.light,.text-btn,.icon-btn,.round-action)>.icon img{filter:brightness(0) invert(1)}
@media(hover:hover){
 body :is(.btn,.text-btn,.icon-btn,.round-action,.appearance-shortcut,.language-trigger,.language-choice,.affinity-chip,.tabs button,.search-tabs button,.hero-slider-controls button,.chat-peer,.mood-picker button,.glass-pagination button):not(:disabled):hover{transform:translateY(-1px);box-shadow:inset 0 1px 3px var(--glass-highlight),inset 0 -2px 3px #233f5618,0 6px 14px var(--glass-shadow);filter:none}
}
body :is(.btn,.text-btn,.icon-btn,.round-action,.language-choice,.chat-peer,.mood-picker button,.glass-pagination button):not(:disabled):active{transform:translateY(1px);box-shadow:inset 0 2px 5px #172b3c30,0 1px 3px var(--glass-shadow)}
body :is(button,a,input,select,textarea,summary):focus-visible{outline:3px solid var(--rose);outline-offset:3px}
body button:disabled{opacity:.48;cursor:default;transform:none!important;box-shadow:inset 0 1px 2px var(--glass-highlight);filter:saturate(.55)}

/* Colored glass icon tiles retain their exact square proportions. */
body :is(.side-link,.mobile-nav-item,.profile-menu-row,.planner-stat,.module-choice,.module-tile,.kind-choice,.portal-benefits>div,.glass-card)>.icon:not([data-icon=next]){
 --tile-tint:#087db1;width:38px;height:38px;min-width:38px;display:inline-flex;align-items:center;justify-content:center;
 border:1px solid #ffffff9c;border-radius:12px;
 background:var(--tile-tint) var(--glass-material) center/100% 100% no-repeat;
 background-blend-mode:overlay;
 box-shadow:inset 0 1px 1px #fff9,0 4px 8px color-mix(in srgb,var(--tile-tint) 27%,transparent);
}
body :is(.side-link,.mobile-nav-item,.profile-menu-row,.planner-stat,.module-choice,.module-tile,.kind-choice,.portal-benefits>div,.glass-card)>.icon:not([data-icon=next]) img{width:21px;height:21px;filter:brightness(0) invert(1) drop-shadow(0 1px 1px #0004);opacity:1}
body [data-icon=personal],body [data-icon=journal],body [data-icon=blog]{--tile-tint:#087b8f!important}
body [data-icon=wedding]{--tile-tint:#bc3a68!important}
body [data-icon=calendar]{--tile-tint:#b93c55!important}
body [data-icon=business],body [data-icon=projects],body [data-icon=preferences],body [data-icon=settings]{--tile-tint:#7750a1!important}
body [data-icon=daily]{--tile-tint:#a86714!important}
body [data-icon=event],body [data-icon=party],body [data-icon=community],body [data-icon=chat]{--tile-tint:#287a64!important}
body .profile-menu-row{min-height:64px;gap:13px}
body .profile-menu-row>.icon[data-icon=next]{width:18px;background:none;box-shadow:none}
body .side-link{gap:12px;border-radius:14px}
body.workspace .sidebar{height:100dvh;overflow:hidden}
body.workspace .sidebar>nav{min-height:0;flex:1;overflow-y:auto;padding:4px 5px;margin-inline:-5px;overscroll-behavior:contain}
body.workspace .sidebar .side-link{padding:8px 12px;min-height:54px;flex-shrink:0}
body.workspace .sidebar-bottom{flex-shrink:0;padding-top:12px}
body .side-link.active{box-shadow:inset 0 1px 1px var(--glass-highlight),0 3px 8px var(--glass-shadow);border:1px solid var(--glass-edge)}
body .mobile-nav-item>.icon{width:32px!important;height:32px!important;min-width:32px!important;border-radius:10px!important}
body .mobile-nav-item>.icon img{width:17px!important;height:17px!important}
body .mobile-nav-item.active>.icon{outline:2px solid var(--rose);outline-offset:2px}
body .mobile-nav{padding-top:8px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}

/* Share, comments and saves use their own semantic glass colors. */
body .social-controls{gap:8px;flex-wrap:wrap;margin-top:16px}
body .social-controls .text-btn{gap:7px;padding:7px 10px;font-size:11px;min-height:44px}
body .social-controls .icon{width:27px;height:27px;border-radius:9px;flex-shrink:0;background:#176eaa var(--glass-material) center/100% no-repeat;background-blend-mode:overlay;box-shadow:0 2px 5px #0d69942b}
body .social-controls .icon img{width:15px;height:15px;filter:brightness(0) invert(1)!important}
body .social-controls [data-action=like-content] .icon{background-color:#b13b68}
body .social-controls [data-action=post-comments] .icon{background-color:#7750a1}
body .social-controls [aria-pressed=true]{border-color:var(--rose);background:color-mix(in srgb,var(--pink) 60%,var(--white));color:var(--ink)}
body .chat-peer.active{border-color:var(--rose);background:var(--sage);box-shadow:inset 0 1px 2px var(--glass-highlight),0 0 0 1px var(--rose),0 4px 9px var(--glass-shadow)}
body button.avatar{border:2px solid var(--glass-edge);box-shadow:inset 0 1px 2px var(--glass-highlight),0 3px 7px var(--glass-shadow)}

/* Real flag images, full language names, crystal round chips. */
body .flag-chip{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;width:32px;height:32px;border:2px solid #ffffffb3;border-radius:50%;background:#eef5f9;box-shadow:inset 0 1px 3px #fff,0 2px 5px #163f5e30;flex-shrink:0}
body .flag-chip img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
body .flag-chip::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid #ffffffab;box-shadow:inset 0 3px 3px #ffffff8a,inset 0 -3px 3px #071e4336;pointer-events:none}
body .language-trigger{gap:9px;padding:5px 11px 5px 5px;border-radius:23px;font-size:12px}
body .language-choice{min-height:68px;gap:11px;padding:12px}
body .language-choice.selected{border-color:var(--rose);background:color-mix(in srgb,var(--sage) 70%,var(--white));box-shadow:inset 0 1px 2px var(--glass-highlight),0 0 0 1px var(--rose),0 4px 9px var(--glass-shadow)}

/* Glass fields preserve native keyboard, date picker and select behavior. */
body :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),textarea,select){
 min-height:44px;border:1px solid var(--glass-edge);border-radius:12px;
 background-color:var(--glass-surface);color:var(--ink);color-scheme:light;
 box-shadow:inset 0 2px 4px #1e456512,inset 0 -1px 1px var(--glass-highlight),0 2px 5px var(--glass-shadow);
 backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
body.workspace[data-color-mode=dark] :is(input,textarea,select){color-scheme:dark}
body :is(input,textarea)::placeholder{color:var(--muted);opacity:1}
body input[type=file]::file-selector-button{border:1px solid var(--glass-edge);border-radius:9px;background:var(--sage);color:var(--ink);box-shadow:inset 0 1px 2px var(--glass-highlight),0 2px 5px var(--glass-shadow);padding:8px 12px;margin-right:12px;font:inherit;cursor:pointer}
body :is(input[type=checkbox],input[type=radio]){accent-color:var(--rose);filter:drop-shadow(0 1px 2px var(--glass-shadow));flex-shrink:0}
body .discovery-search{border-color:var(--glass-edge);background:var(--glass-surface);box-shadow:inset 0 1px 2px var(--glass-highlight),0 3px 7px var(--glass-shadow);border-radius:17px;backdrop-filter:blur(12px)}
body .discovery-search input{box-shadow:none;border:0;background:transparent;backdrop-filter:none}
body.workspace .reflection textarea{background:var(--glass-surface)!important;border-color:var(--glass-edge)!important}
body :is(.note-color-choice,.interest-options>label,.kind-choice,.account-choices label,.module-choice){border-radius:14px;box-shadow:inset 0 1px 2px var(--glass-highlight),inset 0 -1px 2px #233f5614,0 3px 7px var(--glass-shadow)}
body :is(.note-color-choice,.interest-options>label,.kind-choice,.account-choices label,.module-choice):has(input:checked){border-color:var(--rose);outline:1px solid var(--rose);outline-offset:1px}
body :is(.note-color-choice,.interest-options>label,.kind-choice,.account-choices label,.module-choice):has(input:focus-visible){outline:3px solid var(--rose);outline-offset:3px}
body :is(.appearance-option,.planner-theme-option):has(input:checked){box-shadow:inset 0 1px 2px var(--glass-highlight),0 0 0 1px var(--rose),0 4px 10px var(--glass-shadow)}
body.workspace .mood-picker button{border:1px solid var(--glass-edge);box-shadow:inset 0 1px 2px var(--glass-highlight),inset 0 -2px 2px #233f5614,0 3px 7px var(--glass-shadow);background:var(--glass-surface);border-radius:14px}
body.workspace .mood-picker button.active{border-color:var(--rose);background:var(--sage);outline:1px solid var(--rose)}
body.workspace .mood-picker .icon img{filter:none}
body.workspace[data-color-mode=dark] .mood-picker .icon img{filter:brightness(0) invert(1)}
body dialog{border:1px solid var(--glass-edge);box-shadow:inset 0 1px 2px var(--glass-highlight),0 24px 70px #13243c38;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
body dialog::backdrop{background:#122b4659;backdrop-filter:blur(8px)}

/* Tabs, scene switches and actual result pagination share a crystal state. */
body :is(.tabs,.search-tabs){gap:8px;overflow-x:auto;padding:9px 3px;border-bottom:0;scrollbar-width:thin}
body :is(.tabs button,.search-tabs button){padding:10px 16px;border-bottom:1px solid var(--glass-edge);font-size:12px;flex-shrink:0;white-space:nowrap}
body :is(.tabs button,.search-tabs button,.affinity-chip).active,body .glass-pagination [aria-current=page]{background-color:color-mix(in srgb,var(--green) 88%,#000);border-color:color-mix(in srgb,var(--green) 60%,#fff);color:#fff}
body :is(.tabs button,.search-tabs button,.affinity-chip).active::before,body .glass-pagination [aria-current=page]::before{opacity:.12}
body.workspace[data-color-mode=dark] :is(.tabs button,.affinity-chip).active,body.workspace[data-color-mode=dark] .glass-pagination [aria-current=page]{color:#20252a}
body .hero-slider-controls button{background:#06314999;color:#fff;border-color:#ffffff8f;box-shadow:inset 0 1px 2px #ffffff7f,inset 0 -2px 2px #001b3159,0 4px 12px #001b312b}
body .hero-slider-controls [aria-pressed=true]{background:#effaff;color:#09527e;border-color:#fff}
body .hero-slider-controls button:focus-visible{outline-color:#fff}
body .glass-pagination{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin:24px 0 12px}
body .page-controls{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;max-width:100%}
body .glass-pagination button{width:44px;height:44px;padding:10px;font-weight:650}
body .glass-pagination img{width:18px;height:18px;display:block}
body.workspace[data-color-mode=dark] .glass-pagination img{filter:brightness(0) invert(1)}
body .glass-pagination output{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
body .page-gap{color:var(--muted);font-size:12px}
body [hidden]{display:none!important}
/* Glass controls over photographic scenes need an opaque readable foreground. */
body.glass-portal .site-nav :is(.text-btn,.language-trigger){background:#f8fcffeb;color:#17425c;border-color:#ffffffab}
body.glass-portal .community-hero .btn.glass-btn{background:#083451b3!important;border-color:#ffffff9c!important;color:#fff!important}
body.glass-portal .community-hero .btn.light{background:#f6fbffeb;color:#17425c;border-color:#fff}
body.glass-portal .glass-card{box-shadow:inset 0 1px 2px #fff7,0 7px 20px #00172426}
@media(max-width:600px){
 body.glass-portal .community-hero-card .btn{align-self:center;min-height:44px;border-radius:15px}
 body .language-trigger{gap:6px;padding-right:9px;font-size:11px}
 body .language-trigger .flag-chip{width:29px;height:29px}
 body .language-choice{padding:11px;gap:8px;font-size:12px}
 body :is(.btn,.text-btn){padding:10px 14px}
 body .hero-slider-controls button{font-size:10px;padding:9px 12px}
 body :is(.tabs button,.search-tabs button){font-size:11px;padding:10px 12px}
 body .glass-pagination{gap:10px}.page-controls{gap:6px!important}
 body .glass-pagination button{width:42px;min-width:42px}.page-gap{width:10px;text-align:center}
 body .social-controls .text-btn{font-size:10px;padding:6px 8px}
}
@media(prefers-reduced-motion:reduce){body :is(button,a){transition:none!important}body :is(.btn,.text-btn,.round-action):hover{transform:none}}
@media(forced-colors:active){
 body :is(button,input,textarea,select){box-shadow:none;background:Canvas;color:CanvasText;border:1px solid ButtonText}
 body button::before{display:none}body .icon img{filter:none!important}
 body [aria-current=page],body .language-choice.selected{outline:2px solid Highlight}
}