/* Bob Hub 172 · optical glass, layered highlights, theme-aware materials. */
html[data-hub-theme]{
 --glass-fill:color-mix(in srgb,var(--bh-surface) 56%,transparent);
 --glass-solid:color-mix(in srgb,var(--bh-surface) 83%,transparent);
 --glass-edge:#ffffffd9;--glass-edge-dim:#ffffff55;
 --glass-light:#ffffffcf;--glass-shadow:#253e6417;
 --glass-a:color-mix(in srgb,var(--bh-accent) 27%,#dceeff);
 --glass-b:color-mix(in srgb,var(--bh-accent) 15%,#aceee6);
 --glass-c:color-mix(in srgb,var(--bh-accent) 9%,#ece0ff);
 --glass-depth:inset 0 1px 0 var(--glass-light),inset 1px 0 0 #ffffff70,inset 0 -1px 0 #ffffff40,0 12px 35px var(--glass-shadow),0 1px 3px #24334b0a;
}
html[data-hub-mode=dark]{--glass-fill:color-mix(in srgb,var(--bh-surface) 66%,transparent);--glass-solid:color-mix(in srgb,var(--bh-surface) 89%,transparent);--glass-edge:#ffffff42;--glass-edge-dim:#ffffff13;--glass-light:#ffffff40;--glass-shadow:#00000040;--glass-a:color-mix(in srgb,var(--bh-accent) 28%,var(--bh-bg));--glass-b:color-mix(in srgb,var(--bh-accent) 14%,#102c3b);--glass-c:color-mix(in srgb,var(--bh-accent) 11%,#292138);--glass-depth:inset 0 1px 0 #ffffff38,inset 1px 0 0 #ffffff15,inset 0 -1px 0 #ffffff10,0 18px 40px #0004,0 1px 3px #0002}
html[data-hub-theme][data-hub-mode][data-hub-mode] body{
 background:radial-gradient(ellipse at 7% 5%,var(--glass-c),transparent 48%),radial-gradient(ellipse at 91% 18%,var(--glass-b),transparent 53%),radial-gradient(ellipse at 60% 84%,var(--glass-a),transparent 60%),var(--bh-bg)!important;
 background-attachment:fixed!important;color:var(--bh-ink)!important;-webkit-font-smoothing:antialiased;
}
/* Material definition: a bright upper rim, soft inner edge and transparent body. */
html[data-hub-theme][data-hub-mode][data-hub-mode] :is(.topbar,.sidebar,.dock,.welcome-hero,.first-actions>a,.visual-categories>a,.directory-card,.discover-card,.school-strip,.side-theme171,.account-shortcut,.search,.panel,.card,.account-hub,.profile-card,.community-chat,.private-chat,.bob-ai,.device-theme-panel-v132,.daily-challenge,.ranking-overview,.level-board-top-v122,.translator,.focus-timer,.market-lab,.music-records,.farmers-song,.payment-zone,.tutorial-zone,.skin-card,.bob-module-v118,.modal-content,.modal-card,.drawer,.dialog-card,.bob-promo-card-v154){
 background:linear-gradient(135deg,#ffffff28,transparent 45%,#ffffff0c),var(--glass-fill)!important;
 border:1px solid var(--glass-edge)!important;border-right-color:var(--glass-edge-dim)!important;border-bottom-color:var(--glass-edge-dim)!important;
 box-shadow:var(--glass-depth)!important;backdrop-filter:blur(24px) saturate(155%);-webkit-backdrop-filter:blur(24px) saturate(155%);
 border-radius:26px!important;
}
html[data-hub-theme][data-hub-mode][data-hub-mode] .topbar{margin:14px 24px 0;top:12px;height:76px;padding:0 22px;border-radius:26px!important;z-index:30;background:linear-gradient(120deg,#ffffff35,transparent),var(--glass-solid)!important}
html[data-hub-theme][data-hub-mode][data-hub-mode] .layout{grid-template-columns:210px minmax(0,1fr);padding:24px 24px 40px;gap:28px}
html[data-hub-theme][data-hub-mode][data-hub-mode] .layout>section{padding-top:8px}
html[data-hub-theme][data-hub-mode][data-hub-mode] .sidebar{top:114px;height:calc(100dvh - 138px);padding:18px 12px;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--bh-muted) 25%,transparent) transparent}
.sidebar-title{padding:0 12px}.side-footer{padding:12px!important;margin-top:16px!important}.side-link{min-height:44px;margin-bottom:4px;border:1px solid transparent;border-radius:16px!important}.side-theme171{padding:14px!important;margin:16px 0 0!important;border-radius:18px!important}
html[data-hub-theme][data-hub-mode][data-hub-mode] .side-link.active{background:linear-gradient(125deg,#ffffff65,#ffffff16),var(--bh-tint)!important;color:var(--bh-accent)!important;border:1px solid var(--glass-edge)!important;box-shadow:inset 0 1px 0 #ffffff8c,0 4px 10px var(--glass-shadow)}
html[data-hub-theme][data-hub-mode][data-hub-mode] .search{border-radius:999px!important;padding:8px 16px;max-width:470px;background:var(--glass-fill)!important;box-shadow:inset 0 2px 5px #23446608,0 1px 0 var(--glass-light)!important}
html[data-hub-theme][data-hub-mode][data-hub-mode] .search input{border:0!important;box-shadow:none!important;background:transparent!important;outline-offset:5px}
html[data-hub-theme][data-hub-mode][data-hub-mode] .account-shortcut{border-radius:999px!important;padding:8px 16px;font-size:13px;min-height:44px}.account-shortcut img{border-radius:50%}
.heading{margin:5px 0 24px}.heading h1{font-size:30px;letter-spacing:-1px}.heading p{font-size:14px}.eyebrow{letter-spacing:.2em;font-size:10px}
html[data-hub-theme][data-hub-mode][data-hub-mode] .welcome-hero{position:relative;isolation:isolate;min-height:310px;overflow:hidden;border-radius:34px!important;background:radial-gradient(ellipse at 78% 84%,color-mix(in srgb,var(--bh-accent) 30%,transparent),transparent 55%),radial-gradient(ellipse at 65% 8%,#ffffff88,transparent 46%),linear-gradient(115deg,var(--glass-solid),var(--glass-fill))!important;box-shadow:inset 0 2px 0 var(--glass-light),inset 2px 0 0 #ffffff70,inset 0 -2px 0 #ffffff46,0 24px 45px var(--glass-shadow)!important}
.welcome-copy{padding:35px 38px}.welcome-copy h2{font-size:37px;letter-spacing:-1.4px;line-height:1.24}.welcome-copy p{font-size:14px}.welcome-kicker{letter-spacing:.03em}
html[data-hub-theme][data-hub-mode][data-hub-mode] .avatar-sticker{border-radius:38px;background:linear-gradient(140deg,#ffffffbd,#ffffff24)!important;border:1px solid var(--glass-edge)!important;box-shadow:inset 0 2px 2px #fff,0 20px 35px #33476622!important;backdrop-filter:blur(20px);transform:rotate(-9deg)}
html[data-hub-mode=dark] .avatar-sticker{background:linear-gradient(140deg,#ffffff3d,#ffffff10)!important}
.hello-bubble,.welcome-badge{background:var(--glass-solid)!important;border:1px solid var(--glass-edge)!important;box-shadow:inset 0 1px 0 var(--glass-light),0 7px 20px var(--glass-shadow)!important;backdrop-filter:blur(16px);border-radius:22px!important}
html[data-hub-theme][data-hub-mode][data-hub-mode] :is(.login-main,.btn,.auth-primary,.primary,.community-form button,.skin-card button,.device-theme-card-v132 button,.private-toolbar button,.focus-actions button){border-radius:999px!important;border:1px solid color-mix(in srgb,var(--bh-accent) 65%,white)!important;background:linear-gradient(175deg,#ffffff22,transparent 56%,#0000000c),var(--bh-accent)!important;color:var(--bh-onAccent)!important;box-shadow:inset 0 1px 1px #ffffff75,inset 0 -2px 2px #00000010,0 5px 13px color-mix(in srgb,var(--bh-accent) 16%,transparent)!important}
html[data-hub-theme][data-hub-mode][data-hub-mode] :is(.secondary,.ghost,.skin-preview171,.skin-gift-button,#closeModule){background:linear-gradient(140deg,#ffffff35,transparent),var(--glass-solid)!important;color:var(--bh-ink)!important;border:1px solid var(--glass-edge)!important;box-shadow:var(--glass-depth)!important}
html[data-hub-theme][data-hub-mode][data-hub-mode] :is(.first-actions>a,.visual-categories>a){border-radius:24px!important;min-height:86px;transition:transform .2s ease,box-shadow .2s ease;position:relative}
.first-actions{gap:14px;margin-top:18px}.first-actions b{font-size:15px}.visual-categories{gap:14px}.visual-categories b{font-size:13px}.section-head{margin:28px 0 16px}.section-head h2{font-weight:650;font-size:20px}.first-actions img,.visual-categories img{filter:drop-shadow(0 5px 7px #29436a16)}
html[data-hub-theme][data-hub-mode][data-hub-mode] .visual-art{background:radial-gradient(ellipse at 75% 20%,#ffffff76,transparent),linear-gradient(140deg,var(--glass-a),var(--glass-b))!important}
/* Real feature pages use the same glass. Inner reading and input surfaces stay calmer. */
html[data-hub-theme][data-hub-mode][data-hub-mode] #moduleDialog[open]{border:1px solid var(--glass-edge);border-radius:28px;background:var(--glass-fill);box-shadow:var(--glass-depth);height:calc(100dvh - 180px)}
html[data-hub-theme][data-hub-mode][data-hub-mode] #moduleDialog>header{background:var(--glass-solid)!important;border-bottom:1px solid var(--glass-edge);padding:12px 20px}
html[data-hub-theme][data-hub-mode][data-hub-mode] #frameHost iframe{background:transparent}
html[data-hub-theme][data-hub-mode][data-hub-mode] :is(.bh-workspace-tabs,.auth-method-tabs,.skin-categories){background:var(--glass-fill)!important;border:1px solid var(--glass-edge)!important;border-radius:22px!important;box-shadow:inset 0 1px 0 var(--glass-light),0 5px 15px var(--glass-shadow)!important;padding:6px;backdrop-filter:blur(18px)}
html[data-hub-theme][data-hub-mode][data-hub-mode] :is(.bh-workspace-tabs button,.auth-method-tab,.skin-category-link){border-radius:999px!important}
html[data-hub-theme][data-hub-mode][data-hub-mode] :is(.bh-workspace-tabs button[aria-selected=true],.auth-method-tab.active,.skin-category-link.active){background:var(--glass-solid)!important;color:var(--bh-accent)!important;border:1px solid var(--glass-edge)!important;box-shadow:inset 0 1px 0 var(--glass-light),0 3px 10px var(--glass-shadow)!important}
html[data-hub-theme][data-hub-mode][data-hub-mode] :is(.auth-method-panel,.community-message,.ranking-mini,.device-theme-card-v132,.profile-stats,.connection-summary){background:var(--glass-solid)!important;border:1px solid var(--glass-edge)!important;border-radius:20px!important;box-shadow:inset 0 1px 0 var(--glass-light),0 4px 12px var(--glass-shadow)!important}
html[data-hub-theme][data-hub-mode][data-hub-mode] :is(.community-list,.private-list){background:color-mix(in srgb,var(--bh-soft) 64%,transparent)!important;border:1px solid var(--glass-edge)!important;border-radius:22px!important;box-shadow:inset 0 2px 6px #00000005!important}
html[data-hub-theme][data-hub-mode][data-hub-mode] :is(input,textarea,select):not([type=range]):not([type=color]):not([type=checkbox]):not([type=radio]){background:var(--glass-solid)!important;border:1px solid var(--glass-edge)!important;border-radius:16px!important;box-shadow:inset 0 2px 5px #00000006,0 1px 0 var(--glass-light)!important}
html[data-hub-theme][data-hub-mode][data-hub-mode] .search input{background:transparent!important;border:0!important;box-shadow:none!important}
.skin-stage171{background:radial-gradient(ellipse at 80% 20%,color-mix(in srgb,var(--preview-accent) 30%,transparent),transparent),var(--preview-bg);border:1px solid var(--preview-line);box-shadow:inset 0 1px 0 #ffffffab}.skin-stage171 :is(.stage-side,.stage-card){background:color-mix(in srgb,var(--preview-surface) 65%,transparent);border:1px solid #ffffff5c;box-shadow:inset 0 1px 0 #ffffff52}.skin-stage171 .stage-action{border-radius:99px;box-shadow:inset 0 1px 0 #ffffff65}
html[data-hub-theme][data-hub-mode][data-hub-mode] #bh-theme-preview{background:var(--glass-solid);color:var(--bh-ink);border:1px solid var(--glass-edge);border-radius:999px;box-shadow:var(--glass-depth);backdrop-filter:blur(24px)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.first-actions>a:hover,.visual-categories>a:hover,.directory-card:hover,.discover-card:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 var(--glass-light),0 17px 30px var(--glass-shadow)!important}.side-link:hover{background:var(--glass-fill)}.login-main:hover{filter:brightness(1.08)}}
@media(max-width:1050px) and (min-width:761px){html[data-hub-theme][data-hub-mode][data-hub-mode] .layout{grid-template-columns:174px minmax(0,1fr);gap:20px;padding:20px}.welcome-copy{padding:28px}.welcome-copy h2{font-size:32px}}
@media(max-width:760px){
 html[data-hub-theme][data-hub-mode][data-hub-mode] .topbar{height:auto;margin:10px 12px 0;top:8px;padding:12px 14px;border-radius:25px!important;gap:10px}
 html[data-hub-theme][data-hub-mode][data-hub-mode] .layout{display:block;padding:20px 15px 118px}.layout>section{padding-top:0!important}
 html[data-hub-theme][data-hub-mode][data-hub-mode] .sidebar{display:none!important}
 html[data-hub-theme][data-hub-mode][data-hub-mode] .dock{border-radius:30px!important;background:linear-gradient(120deg,#ffffff40,transparent),var(--glass-solid)!important;backdrop-filter:blur(30px) saturate(160%);-webkit-backdrop-filter:blur(30px) saturate(160%);bottom:max(12px,env(safe-area-inset-bottom));padding:8px 10px}
 html[data-hub-theme][data-hub-mode][data-hub-mode] .dock a[aria-current=page] .dock-icon{border-radius:20px!important;background:linear-gradient(140deg,#ffffff60,#ffffff13),var(--bh-tint)!important;box-shadow:inset 0 1px 0 var(--glass-light),0 2px 7px var(--glass-shadow)!important;border:1px solid var(--glass-edge)!important}
 .heading h1{font-size:25px}.heading p{font-size:13px}.heading{margin-bottom:19px}.welcome-copy{padding:25px}.welcome-copy h2{font-size:31px}.welcome-copy p{font-size:13px}
 html[data-hub-theme][data-hub-mode][data-hub-mode] .welcome-hero{min-height:0;border-radius:28px!important}.avatar-sticker{border-radius:24px!important}
 html[data-hub-theme][data-hub-mode][data-hub-mode] :is(.first-actions>a,.visual-categories>a){border-radius:22px!important;min-height:105px;backdrop-filter:none;-webkit-backdrop-filter:none}
 html[data-hub-theme][data-hub-mode][data-hub-mode] :is(.directory-card,.skin-card,.discover-card){backdrop-filter:none;-webkit-backdrop-filter:none}
 html[data-hub-theme][data-hub-mode][data-hub-mode] #moduleDialog[open]{height:calc(100dvh - 294px);min-height:340px;border-radius:23px}.section-head h2{font-size:17px}
 .first-actions{gap:12px}.visual-categories{gap:12px}.account-shortcut{min-width:44px}.bh-workspace-tabs{border-radius:20px!important}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){html[data-hub-theme]{--glass-fill:var(--bh-surface);--glass-solid:var(--bh-surface)}}
@media(prefers-reduced-transparency:reduce){html[data-hub-theme]{--glass-fill:var(--bh-surface);--glass-solid:var(--bh-surface)}html[data-hub-theme] *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}
@media(prefers-reduced-motion:reduce){.first-actions>a,.visual-categories>a,.directory-card,.discover-card{transition:none!important;transform:none!important}}
@media(forced-colors:active){html[data-hub-theme] *{box-shadow:none!important;backdrop-filter:none!important}html[data-hub-theme] :is(a,button,input,textarea,select){border:1px solid ButtonText!important}}
/* Explicit workspace selectors override legacy ID rules without touching game cells. */
html[data-hub-theme][data-hub-mode] body:has(#hub169-content){background:radial-gradient(ellipse at 100% 4%,var(--glass-b),transparent 60%),radial-gradient(ellipse at 5% 90%,var(--glass-c),transparent 65%),var(--bh-bg)!important;background-attachment:fixed!important}
html[data-hub-theme] #app .login-main,html[data-hub-theme] #hub169-content :is(.auth-primary,.primary,.community-form button,.skin-card button,.device-theme-card-v132 button,.private-toolbar button,.focus-actions button){border-radius:999px!important;box-shadow:inset 0 1px 1px #ffffff75,inset 0 -2px 2px #00000010,0 5px 13px color-mix(in srgb,var(--bh-accent) 16%,transparent)!important}
html[data-hub-theme] #hub169-content :is(.auth-method-tab,.skin-category-link,.bh-workspace-tabs button){border-radius:999px!important}
html[data-hub-theme] #hub169-content :is(.auth-method-panel,.handdrawn-avatar-lab){background:var(--glass-solid)!important;border:1px solid var(--glass-edge)!important;border-radius:23px!important;box-shadow:var(--glass-depth)!important}
html[data-hub-theme] #hub169-content :is(.auth-method-tabs,.bh-workspace-tabs){border-radius:24px!important;background:var(--glass-fill)!important;border:1px solid var(--glass-edge)!important;box-shadow:inset 0 1px 0 var(--glass-light),0 4px 12px var(--glass-shadow)!important}
html[data-hub-theme] #hub169-content :is(.auth-method-tab.active,.bh-workspace-tabs button[aria-selected=true]){background:var(--glass-solid)!important;box-shadow:inset 0 1px 0 var(--glass-light),0 4px 9px var(--glass-shadow)!important;border:1px solid var(--glass-edge)!important}
html[data-hub-theme] #moduleDialog :is(#closeModule,#directModule){border-radius:999px!important}
