*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial;color:#102544;background:#edf5ff}button,input{font:inherit}.app{min-height:100vh;display:grid;grid-template-columns:250px minmax(0,1fr) 330px;width:100%;max-width:none;margin:0;box-shadow:none}.sidebar{position:sticky;top:0;height:100vh;padding:22px 16px;color:#fff;background:linear-gradient(180deg,#0b345d,#06294d 65%,#082c4d);box-shadow:12px 0 32px #0b345d22;display:flex;flex-direction:column}.brand{display:flex;gap:12px;align-items:center;padding:0 8px 22px}.logo{font-size:45px}.brand strong{font-size:21px;line-height:1.02}.brand small{display:block;font-size:10px;margin-top:7px;opacity:.75}.sidebar nav{display:flex;flex-direction:column;gap:4px}.sidebar nav button,.admin-link{border:0;background:transparent;color:#f5f8ff;text-decoration:none;padding:11px 13px;border-radius:12px;display:flex;align-items:center;gap:14px;text-align:left;cursor:pointer}.sidebar nav button i{width:25px;font-size:23px;font-style:normal;text-align:center}.sidebar nav button:hover,.admin-link:hover{background:#ffffff12}.sidebar nav button.active{background:linear-gradient(90deg,#ff3838,#8c2948);box-shadow:0 10px 22px #e6233933}.sidebar hr{width:100%;border:0;border-top:1px solid #ffffff18;margin:8px 0}.sidebar label{font-size:11px;letter-spacing:.14em;opacity:.6;padding:0 12px 3px}.motto{margin-top:auto;padding:16px 12px 5px;letter-spacing:.17em;font-size:12px;line-height:1.55;opacity:.58}main{min-width:0;background:linear-gradient(135deg,#f9fcff,#edf6ff);padding-bottom:25px}header{height:72px;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;background:#ffffffaa;backdrop-filter:blur(16px);border-bottom:1px solid #dbe9f6}.search{height:42px;max-width:520px;flex:1;border:1px solid #d7e4ef;border-radius:12px;background:#f6f9fc;display:flex;align-items:center;gap:9px;padding:0 13px;font-size:17px;color:#7d90a5;box-shadow:inset 0 1px 0 #fff;transition:.18s ease}.search:focus-within{background:#fff;border-color:#a9c9e8;box-shadow:0 0 0 3px #2d7fd20d}.search svg{width:18px;height:18px;flex:0 0 18px}.search input{border:0;outline:0;background:transparent;width:100%;color:#314a67;font-size:13px;font-weight:400;letter-spacing:0;line-height:1.2}.search input::placeholder{color:#8b9caf;opacity:1;font-size:13px;font-weight:400}.header-actions{display:flex;align-items:center;gap:8px;margin-left:auto}.user-control{height:48px;display:flex;align-items:center;gap:10px;border:1px solid transparent;background:transparent;border-radius:14px;padding:4px 7px 4px 5px;color:#18314f;cursor:pointer;text-align:left;transition:.18s ease}.user-control:hover{background:#f4f8fc;border-color:#e0eaf3}.user-meta{min-width:0}.user-meta strong,.user-meta small{display:block;white-space:nowrap}.user-meta strong{font-size:13px;line-height:1.25;font-weight:700}.user-meta small{margin-top:2px;color:#71849a;font-size:10px;font-weight:500}.user-chevron{font-size:16px;color:#8293a7;margin-left:2px}.avatar,.big-avatar{display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#eaf5ff,#bcd9f2);font-weight:800}.avatar{width:42px;height:42px}.notify{width:40px;height:40px;display:grid;place-items:center;font-size:22px;position:relative;margin-right:2px;border-radius:12px;color:#536b86;cursor:pointer}.notify:hover{background:#f4f8fc}.notify b{position:absolute;right:-7px;top:-7px;background:#f12639;color:#fff;font-size:10px;padding:2px 5px;border-radius:10px}#content{padding:16px clamp(16px,1.15vw,28px) 28px;width:100%;max-width:none;margin:0}.hero{height:310px;border-radius:18px;background-size:cover;background-position:center;overflow:hidden;color:#fff;display:flex;align-items:center;padding:38px 46px;box-shadow:0 10px 28px #244d7620}.hero h1{font-size:42px;line-height:.96;margin:0 0 16px}.hero h1 em{color:#ffd76e;font-style:normal}.hero p{font-size:19px}.hero blockquote{font-style:italic;margin:28px 0 0;font-size:17px}.module-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px;align-items:stretch}.module{border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 7px 18px #264f7513;cursor:pointer;border:1px solid #e1ecf5;transition:.2s}.module:hover{transform:translateY(-2px);box-shadow:0 12px 24px #264f7522}.module img{display:block;width:100%;height:clamp(132px,9vw,168px);object-fit:cover}.module>div{min-height:78px;display:flex;align-items:center;padding:12px 13px;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 12%,white),#fff)}.module i{width:46px;height:46px;flex:0 0 46px;border-radius:14px;display:grid;place-items:center;background:var(--accent);font-style:normal;color:#fff;margin-right:11px;box-shadow:0 7px 16px color-mix(in srgb,var(--accent) 28%,transparent)}.module i svg{width:24px;height:24px;display:block;stroke:currentColor}.module span{min-width:0;flex:1}.module b,.module small{display:block}.module b{font-size:15px;line-height:1.2}.module small{font-size:11px;line-height:1.3;color:#58708c;margin-top:4px;white-space:normal}.module button{border:0;background:#fff8;border-radius:50%;width:32px;height:32px;color:var(--accent);font-size:20px}.section-head,.panel-title{display:flex;align-items:center;justify-content:space-between}.section-head h2{font-size:18px}.section-head a,.panel-title a{font-size:12px;color:#1674e8;cursor:pointer}.recent{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.recent>div{background:#fff;border:1px solid #e4edf5;border-radius:14px;padding:12px;display:flex;gap:10px;font-size:12px}.recent>div:first-letter{font-size:24px}.right{padding:86px 16px 18px 0;background:linear-gradient(180deg,#f1f8ff,#e8f3ff)}.panel{background:#ffffffc9;backdrop-filter:blur(16px);border:1px solid #dce9f4;border-radius:18px;padding:16px;box-shadow:0 8px 24px #234c7410;margin-bottom:13px}.profile-top{display:flex;gap:12px;align-items:center}.big-avatar{width:64px;height:64px;font-size:25px}.profile-top h3,.profile-top p{margin:2px 0}.profile-top p{font-size:12px;color:#657a95}.bar{height:8px;background:#dce9f4;border-radius:10px;margin:14px 0;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,#ff3a43,#ff6c45);border-radius:10px}.statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.statrow>div{text-align:center;background:#f5f9fd;border-radius:12px;padding:8px 4px}.statrow b,.statrow small{display:block}.statrow b{font-size:16px}.statrow small{font-size:9px;color:#637992}.panel-title h3{font-size:16px;margin:0 0 10px}.task,.leader{display:flex;align-items:center;gap:9px;padding:9px 2px;border-top:1px solid #edf2f7}.task i{width:35px;height:35px;border-radius:10px;background:#edf6ff;display:grid;place-items:center;font-style:normal}.task span,.leader span{flex:1;font-size:12px}.task small{display:block;color:#6d8199}.task b{font-size:11px;color:#ff642c;background:#fff3e9;padding:5px 7px;border-radius:8px}.leader i{width:26px;text-align:center;font-style:normal}.leader b{font-size:12px}.leader.me{background:#fff5e7;border-radius:9px;padding-left:6px;padding-right:6px}.page-title{padding:8px 3px 12px}.page-title h1{margin:0}.page-title p{color:#6a7e95}.lesson-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.lesson{margin:0}.lesson>span{font-size:11px;color:#1674e8;background:#eaf4ff;padding:4px 7px;border-radius:7px}.lesson h3{margin-bottom:4px}.lesson p{color:#667b94;min-height:40px}.lesson button,.primary{border:0;background:#1674e8;color:#fff;padding:9px 13px;border-radius:10px;cursor:pointer}.lesson button:disabled{background:#a7b8c9}.profile-detail{max-width:650px}.loading,.fatal,.empty{padding:40px;text-align:center}.login-page{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 20% 20%,#204e78,#071d36 60%)}.login-card{width:min(430px,92vw);background:#fff;padding:30px;border-radius:24px;box-shadow:0 30px 70px #0005}.login-brand{display:flex;gap:12px;align-items:center}.login-brand .flame{font-size:45px}.login-brand h1{font-size:22px;margin:0}.login-brand p{font-size:10px;color:#71839a}.login-card label{display:block;font-size:13px;margin:14px 0}.login-card input{display:block;width:100%;margin-top:6px;padding:12px;border:1px solid #d7e2ec;border-radius:10px}.wide{width:100%}.alert{background:#ffe9eb;color:#a21c2b;padding:10px;border-radius:9px}.demo-note{font-size:11px;color:#6e8095;margin-top:16px;line-height:1.5}.muted{color:#6e8095}@media(min-width:2100px){.app{grid-template-columns:260px minmax(0,1fr) 350px}.sidebar{padding-left:18px;padding-right:18px}.right{padding-right:20px}.module-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.module img{height:clamp(150px,7.2vw,190px)}.hero{height:320px}}
@media(min-width:3000px){.app{grid-template-columns:280px minmax(0,1fr) 380px}.module-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.module img{height:180px}.right{padding-right:22px}.hero{height:340px}}
@media(max-width:1200px){.app{grid-template-columns:220px minmax(0,1fr)}.right{display:none}.module-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.app{display:block}.sidebar{height:auto;position:relative}.sidebar nav{display:grid;grid-template-columns:repeat(2,1fr)}.motto,.sidebar hr,.sidebar label{display:none}header{position:sticky;top:0;z-index:4}.user-meta,.user-chevron{display:none}.user-control{padding:3px;border:0}.hero{height:250px;padding:25px}.hero h1{font-size:32px}.module-grid,.lesson-grid,.recent{grid-template-columns:1fr}}

/* UI4: unified SVG iconography, seamless header/right rail, container-responsive grid */
.svg-icon{display:inline-grid;place-items:center;width:20px;height:20px;line-height:0}.svg-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.svg-icon svg circle[fill]{fill:currentColor;stroke:none}
.brand-mark{position:relative;width:44px;height:48px;flex:0 0 44px;filter:drop-shadow(0 8px 12px #ff3d2f2b)}.flame-part{position:absolute;bottom:4px;border-radius:70% 30% 65% 35% / 75% 35% 65% 25%;transform:rotate(43deg)}.flame-a{width:31px;height:38px;left:6px;background:linear-gradient(145deg,#ff2f43,#ff6333)}.flame-b{width:23px;height:29px;left:12px;bottom:5px;background:linear-gradient(145deg,#ff7a21,#ffb21c)}.flame-c{width:12px;height:18px;left:18px;bottom:6px;background:#ffd66c}
.sidebar nav button i,.admin-link i{width:25px;height:25px;display:grid;place-items:center;font-style:normal}.sidebar nav button i .svg-icon,.admin-link i .svg-icon{width:21px;height:21px}.sidebar nav button.active i .svg-icon{transform:scale(1.03)}
.app{grid-template-rows:72px minmax(0,1fr)}.sidebar{grid-row:1 / -1}.app>main{display:grid;grid-template-rows:72px minmax(0,1fr);min-width:0;grid-row:1/-1;grid-column:2}.app>main>header{grid-row:1;grid-column:1;position:relative;z-index:3}.app>main>#content{grid-row:2;grid-column:1}.right{grid-column:3;grid-row:1/-1;padding:88px 16px 18px;background:linear-gradient(180deg,#f7fbff,#eaf4ff);border-left:1px solid #dce9f4;min-width:0}
header{border-radius:0;padding-right:18px}.header-actions{height:100%}.notify{border:0;background:transparent;padding:0}.notify .svg-icon{width:19px;height:19px}.notify b{right:0;top:1px;min-width:16px;text-align:center}.user-control{border-radius:12px}.user-chevron{display:grid;place-items:center}.user-chevron .svg-icon{width:15px;height:15px}
.search{font-size:13px}.search>.svg-icon{width:17px;height:17px;flex:0 0 17px;color:#7b90a5}
#content{container-type:inline-size;container-name:vecmain}.module-grid{grid-template-columns:repeat(3,minmax(0,1fr))}@container vecmain (min-width:1450px){.module-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.module img{height:clamp(148px,9cqw,185px)}}@container vecmain (min-width:2050px){.module-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}.module img{height:180px}}
.recent>div:first-letter{font-size:inherit}.recent-icon{width:34px;height:34px;flex:0 0 34px;border-radius:10px;background:#edf6ff;color:#236fb8;display:grid;place-items:center}.recent-icon .svg-icon{width:18px;height:18px}.statrow .svg-icon{width:17px;height:17px;margin:0 auto 4px;color:#3978b6}.task i .svg-icon{width:18px;height:18px;color:#2a75bb}
@media(min-width:2100px){.module-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:3000px){.module-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1200px){.app{grid-template-rows:72px minmax(0,1fr)}.app>main{grid-column:2}.right{display:none}}
@media(max-width:760px){.app{display:block}.app>main{display:block}.right{display:none}}

/* UI5: one continuous topbar across content + right rail. No duplicated middle header block. */
.app{
  grid-template-columns:250px minmax(0,1fr) 330px;
  grid-template-rows:72px minmax(0,1fr);
}
.sidebar{grid-column:1;grid-row:1 / -1}
.topbar{
  grid-column:2 / 4;
  grid-row:1;
  height:72px;
  min-width:0;
  padding:11px 18px 11px 20px;
  display:flex;
  align-items:center;
  gap:20px;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid #dbe8f3;
  border-radius:0;
  position:sticky;
  top:0;
  z-index:20;
}
.topbar .search{width:min(560px,48vw);max-width:560px;flex:0 1 560px}
.topbar .header-actions{margin-left:auto;display:flex;align-items:center;gap:8px;height:100%}
.app>main{
  grid-column:2;
  grid-row:2;
  display:block;
  min-width:0;
  background:linear-gradient(135deg,#f9fcff,#edf6ff);
  padding-bottom:25px;
}
.app>main>#content{width:100%;max-width:none;margin:0}
.right{
  grid-column:3;
  grid-row:2;
  padding:16px 16px 18px;
  min-width:0;
  background:linear-gradient(180deg,#f7fbff,#eaf4ff);
  border-left:1px solid #dce9f4;
}
/* remove the old visual seam/corner between header and right rail */
.topbar:after{content:none}
.user-control{max-width:270px}
.user-meta strong{max-width:190px;overflow:hidden;text-overflow:ellipsis}
@media(min-width:2100px){
  .app{grid-template-columns:260px minmax(0,1fr) 350px}
  .topbar{padding-left:22px;padding-right:20px}
  .topbar .search{width:min(620px,40vw);max-width:620px;flex-basis:620px}
}
@media(min-width:3000px){
  .app{grid-template-columns:280px minmax(0,1fr) 380px}
  .topbar .search{width:min(700px,36vw);max-width:700px;flex-basis:700px}
}
@media(max-width:1050px){
  .app{grid-template-columns:82px minmax(0,1fr);grid-template-rows:68px minmax(0,1fr)}
  .topbar{grid-column:2;grid-row:1;height:68px;padding:9px 12px}
  .right{display:none}
  .app>main{grid-column:2;grid-row:2}
  .topbar .search{width:auto;max-width:none;flex:1}
  .user-meta{display:none}
  .user-control{padding-right:4px}
}
@media(max-width:680px){
  .app{display:block}
  .topbar{position:sticky;top:0;height:62px;padding:8px 10px}
  .topbar .search{height:40px}
  .notify{display:none}
  .user-control .avatar{width:38px;height:38px}
  .user-chevron{display:none}
}

/* UI6: refined one-line brand + non-duplicated achievement rail */
.brand{gap:10px;padding:1px 7px 21px;min-width:0}
.brand-mark{width:38px;height:42px;flex-basis:38px}
.brand-mark .flame-a{width:27px;height:34px;left:5px}
.brand-mark .flame-b{width:20px;height:26px;left:10px}
.brand-mark .flame-c{width:10px;height:16px;left:15px}
.brand-copy{min-width:0;flex:1}
.brand-copy strong{display:flex;align-items:baseline;gap:5px;white-space:nowrap;font-size:16px;line-height:1.1;letter-spacing:-.025em;font-weight:500}
.brand-copy strong span{color:#dce9f6;font-weight:500}
.brand-copy strong b{color:#fff;font-weight:800}
.brand-copy small{display:block;margin-top:5px;font-size:8.5px;line-height:1;letter-spacing:.105em;color:#a9bfd3;opacity:.9;white-space:nowrap}
.achievement-card{padding:15px 16px 14px;background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(247,251,255,.82))}
.achievement-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.achievement-head>div{min-width:0}
.achievement-head span{display:block;font-size:9px;line-height:1.1;letter-spacing:.13em;font-weight:800;color:#8295aa;margin-bottom:5px}
.achievement-head strong{display:block;font-size:18px;line-height:1.05;color:#173454;letter-spacing:-.02em}
.achievement-head>b{font-size:20px;line-height:1;color:#173454;white-space:nowrap}
.achievement-head>b small{font-size:9px;letter-spacing:.08em;color:#71879d;font-weight:700}
.achievement-bar{margin:13px 0 6px;height:7px}
.achievement-progress{display:flex;justify-content:space-between;gap:10px;font-size:9px;color:#7b8fa5;margin-bottom:12px}
.achievement-card .statrow{border-top:1px solid #e8f0f6;padding-top:11px}
.achievement-card .statrow>div{background:transparent;padding:3px 2px}
.achievement-card .statrow b{font-size:15px;margin-top:2px}
.achievement-card .statrow small{font-size:8.5px;margin-top:2px}
@media(max-width:1050px){.brand-copy{display:none}.brand{justify-content:center;padding-left:0;padding-right:0}.brand-mark{margin:auto}}

/* UI7 — Adaptive cards: keep the six primary modules balanced as a 3×2 desktop grid. */
@media (min-width:1201px){
  .module-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:clamp(16px,1vw,24px);
  }
  .module{
    aspect-ratio:1.55 / 1;
    min-height:245px;
    max-height:none;
    display:flex;
    flex-direction:column;
  }
  .module img{
    width:100%;
    height:auto !important;
    min-height:0;
    flex:1 1 62%;
    object-fit:cover;
  }
  .module>div{
    flex:0 0 auto;
    min-height:clamp(82px,5.1vw,118px);
    padding:clamp(12px,.9vw,20px);
  }
  .module i{
    width:clamp(46px,2.7vw,58px);
    height:clamp(46px,2.7vw,58px);
    flex-basis:clamp(46px,2.7vw,58px);
    border-radius:clamp(13px,.8vw,17px);
    margin-right:clamp(10px,.7vw,15px);
  }
  .module i svg{width:clamp(24px,1.35vw,30px);height:clamp(24px,1.35vw,30px)}
  .module b{font-size:clamp(15px,.86vw,19px)}
  .module small{font-size:clamp(11px,.64vw,14px);margin-top:clamp(3px,.25vw,6px)}
  .module button{width:clamp(32px,1.8vw,40px);height:clamp(32px,1.8vw,40px)}
}

/* Prevent older wide-screen/container rules from changing the six-module desktop grid. */
@container vecmain (min-width:1450px){.module-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important}}
@container vecmain (min-width:2050px){.module-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important}}

/* UI8 — stronger VEC branding + installable web-app identity */
.brand{position:relative;gap:11px;padding:2px 6px 22px;align-items:center}
.brand::after{content:"";position:absolute;left:7px;right:7px;bottom:10px;height:1px;background:linear-gradient(90deg,#ffb21c88,#2f86e755,transparent)}
.brand-logo{width:46px;height:46px;flex:0 0 46px;object-fit:contain;filter:drop-shadow(0 7px 10px #001a3560)}
.brand-copy{min-width:0;flex:1}
.brand-copy strong{display:flex!important;align-items:baseline!important;gap:4px!important;white-space:nowrap;font-size:16.5px!important;line-height:1!important;letter-spacing:-.035em!important}
.brand-copy strong span{font-weight:650!important;color:#eef7ff!important}
.brand-copy strong b{font-weight:850!important;background:linear-gradient(90deg,#ffffff 0%,#dceeff 45%,#ffd477 100%);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.brand-copy small{margin-top:7px!important;font-size:8px!important;letter-spacing:.115em!important;color:#a9c4dc!important}
@media(min-width:2100px){.brand-logo{width:50px;height:50px;flex-basis:50px}.brand-copy strong{font-size:18px!important}.brand-copy small{font-size:8.5px!important}}
@media(max-width:1050px){.brand-logo{width:42px;height:42px;flex-basis:42px}.brand::after{display:none}}

/* UI9 — centered stacked sidebar branding */
.sidebar .brand{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:7px!important;padding:0 6px 19px!important;text-align:center!important;position:relative}
.sidebar .brand::after{left:10px!important;right:10px!important;bottom:8px!important;background:linear-gradient(90deg,transparent,#ffb21c88 28%,#2f86e788 72%,transparent)!important}
.sidebar .brand-logo{width:78px!important;height:78px!important;flex:0 0 78px!important;object-fit:contain!important;filter:drop-shadow(0 10px 16px #00162f80)!important}
.sidebar .brand-copy{width:100%!important;min-width:0!important;display:block!important}
.sidebar .brand-copy strong{display:block!important;white-space:nowrap!important;font-size:17.5px!important;line-height:1.05!important;letter-spacing:-.035em!important;font-weight:800!important}
.sidebar .brand-copy strong span,.sidebar .brand-copy strong b{display:inline!important}
.sidebar .brand-copy strong span{color:#fff!important;font-weight:700!important}
.sidebar .brand-copy strong span::after{content:" ";}
.sidebar .brand-copy strong b{font-weight:850!important;background:linear-gradient(90deg,#fff 0%,#e7f4ff 48%,#ffd56c 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}
.sidebar .brand-copy small{display:block!important;margin-top:7px!important;font-size:8.5px!important;line-height:1!important;letter-spacing:.14em!important;color:#c4d6e7!important;white-space:nowrap!important}
@media(min-width:2100px){.sidebar .brand-logo{width:86px!important;height:86px!important;flex-basis:86px!important}.sidebar .brand-copy strong{font-size:18.5px!important}.sidebar .brand-copy small{font-size:9px!important}}
@media(max-width:1050px){.sidebar .brand{padding-bottom:14px!important}.sidebar .brand-logo{width:48px!important;height:48px!important;flex-basis:48px!important}.sidebar .brand-copy{display:none!important}}

/* UI11 — English Café: topic cards, open tables and conversation modes */
.cafe-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin:2px 0 20px;padding:24px 26px;border-radius:22px;background:linear-gradient(120deg,#082f59 0%,#0d4d84 62%,#146bb0 100%);color:#fff;box-shadow:0 16px 34px #123b6420;overflow:hidden;position:relative}.cafe-head:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-70px;top:-140px;background:#49b7ff22}.cafe-head h1{font-size:clamp(25px,2vw,36px);line-height:1.08;margin:5px 0 7px;letter-spacing:-.04em}.cafe-head h1 em{font-style:normal;color:#ffbd36}.cafe-head p{margin:0;color:#d6e8f8;font-size:13px}.eyebrow{font-size:9px;font-weight:900;letter-spacing:.16em;color:#83c9ff}.create-table,.primary{border:0;border-radius:12px;background:linear-gradient(135deg,#ffb21f,#ff7a18);color:#fff;font-weight:800;padding:12px 16px;box-shadow:0 8px 20px #ff8b2735;cursor:pointer;white-space:nowrap}.cafe-live{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid #e2edf5;border-radius:14px;padding:11px 15px;margin-bottom:17px;box-shadow:0 5px 18px #1b4c7810;font-size:11px;color:#6c8195}.cafe-live span{color:#153c61;font-weight:750}.cafe-live span i,.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#19bd75;margin-right:6px;box-shadow:0 0 0 4px #19bd7518}.cafe-live b{color:#ef8c1b}.cafe-live small{margin-left:auto}.cafe-section{margin:0 0 22px}.topic-heading{align-items:center}.topic-search{height:36px;width:210px;display:flex;align-items:center;gap:7px;border:1px solid #dce8f1;background:#fff;border-radius:10px;padding:0 10px}.topic-search .svg-icon{width:15px;height:15px;color:#7d91a5}.topic-search input{border:0;outline:0;width:100%;font-size:11px;background:transparent}.open-tables{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.table-card{background:#fff;border:1px solid #e0ebf4;border-radius:15px;padding:14px;box-shadow:0 6px 18px #173e6410}.table-type{display:inline-block;font-size:8px;font-weight:900;letter-spacing:.12em;color:#1975cf;background:#eaf5ff;padding:4px 7px;border-radius:6px}.table-card h3{font-size:14px;margin:10px 0 4px;color:#173a5d}.table-card p{font-size:10px;color:#8293a4;margin:0}.table-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:13px;font-size:10px;color:#6d8397}.table-bottom button{border:0;background:#0f75d5;color:#fff;border-radius:8px;padding:7px 13px;font-size:10px;font-weight:800;cursor:pointer}.cafe-filters{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 13px}.cafe-filters button{border:1px solid #dce8f1;background:#fff;color:#60778e;border-radius:999px;padding:7px 11px;font-size:10px;font-weight:700;cursor:pointer}.cafe-filters button.active{background:#0d69bd;border-color:#0d69bd;color:#fff}.topic-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.topic-card{background:#fff;border:1px solid #e0ebf4;border-radius:17px;padding:16px;box-shadow:0 8px 24px #173e6410;cursor:pointer;transition:.2s;min-height:205px;display:flex;flex-direction:column}.topic-card:hover{transform:translateY(-3px);box-shadow:0 14px 28px #173e641b;border-color:#b9d8ef}.topic-top{display:flex;align-items:center;justify-content:space-between}.topic-category{font-size:8px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#0c72ca}.topic-top>b{font-size:8px;color:#ef8d17;background:#fff2dd;padding:4px 7px;border-radius:999px}.topic-card h3{font-size:17px;color:#173a5d;margin:12px 0 6px;letter-spacing:-.02em}.topic-card>p{font-size:11px;line-height:1.55;color:#71869a;margin:0 0 12px;flex:1}.topic-meta{display:flex;gap:6px;flex-wrap:wrap}.topic-meta span{font-size:9px;color:#647d93;background:#f1f6fa;padding:5px 7px;border-radius:7px}.topic-status{display:flex;align-items:center;margin-top:13px;padding-top:11px;border-top:1px solid #edf2f6;font-size:9px;font-weight:750;color:#4e718d}.topic-status button{margin-left:auto;width:28px;height:28px;border-radius:50%;border:0;background:#edf6ff;color:#0c72ca;cursor:pointer}.modal-backdrop{position:fixed;inset:0;background:#04182b9c;backdrop-filter:blur(5px);z-index:1000;display:grid;place-items:center;padding:22px}.modal-card{position:relative;width:min(760px,96vw);max-height:90vh;overflow:auto;background:#fff;border-radius:22px;padding:26px;box-shadow:0 30px 80px #00132655}.modal-close{position:absolute;right:14px;top:12px;border:0;background:#edf4f9;color:#527089;width:32px;height:32px;border-radius:50%;font-size:20px;cursor:pointer}.topic-detail h2,.ai-preview h2{font-size:25px;color:#173a5d;margin:6px 0}.topic-detail>p,.ai-preview>p{color:#71869a;font-size:12px;line-height:1.6}.guide-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0}.guide-cols>div{background:#f7fbfe;border:1px solid #e4eef5;border-radius:14px;padding:14px}.guide-cols h4,.topic-detail>h4{font-size:11px;color:#183d60;margin:0 0 10px;text-transform:uppercase;letter-spacing:.07em}.guide-cols p{display:flex;gap:8px;align-items:flex-start;font-size:11px;color:#526d84;margin:7px 0}.guide-cols p b{display:grid;place-items:center;min-width:20px;height:20px;border-radius:6px;background:#e3f2ff;color:#0d72c9}.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.mode{border:1px solid #dce8f1;background:#fff;border-radius:14px;padding:14px;text-align:left;cursor:pointer;transition:.2s}.mode:hover{border-color:#8bc3ed;background:#f7fbff}.mode i{display:inline-grid;place-items:center;height:30px;min-width:30px;padding:0 7px;border-radius:8px;background:#eaf5ff;color:#0c72ca;font-style:normal;font-size:9px;font-weight:900}.mode b{display:block;color:#173a5d;font-size:13px;margin:8px 0 4px}.mode small{color:#8495a6;font-size:9px}.mode.ai{background:linear-gradient(145deg,#f0f8ff,#fff8e9)}.ai-bubble{background:#eef7ff;border-left:3px solid #1981df;border-radius:10px;padding:13px;margin:16px 0;color:#315c7f;font-size:12px;line-height:1.55}.field{display:block;font-size:10px;font-weight:800;color:#46637d;margin:12px 0}.field input,.field select{display:block;width:100%;box-sizing:border-box;margin-top:5px;border:1px solid #dce8f1;border-radius:10px;padding:10px;font:inherit;background:#fff}.empty small{color:#8295a8}@media(max-width:1250px){.open-tables{grid-template-columns:repeat(2,1fr)}.topic-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){.cafe-head{align-items:flex-start;flex-direction:column}.topic-grid,.open-tables,.guide-cols,.mode-grid{grid-template-columns:1fr}.topic-heading{align-items:flex-start;gap:10px}.topic-search{width:100%}.cafe-live small{display:none}}

/* English Café V1.1 — room lifecycle & host controls */
.table-card-head{display:flex;align-items:center;gap:7px}.table-card-head .table-type{margin-right:auto}.room-state{font-size:8px;font-weight:800;padding:4px 7px;border-radius:999px;background:#eef4f8;color:#637b90}.room-state.active{background:#e8f9f1;color:#10945e}.room-state.waiting,.room-state.open{background:#fff4df;color:#c9760c}.table-manage{width:26px;height:26px;border:1px solid #dce8f1;background:#fff;color:#647f96;border-radius:8px;cursor:pointer;font-size:12px;line-height:1}.table-bottom button.joined{background:#edf4f9;color:#567086;box-shadow:none}.room-manage h2,.room-success h2{font-size:24px;color:#173a5d;margin:6px 0}.room-manage-title p,.room-success p{font-size:11px;color:#71869a}.member-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:16px 0}.member-list>div{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:9px;border:1px solid #e3edf5;background:#f8fbfd;border-radius:12px;padding:8px 10px}.member-avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,#0b69bb,#17a0dc);color:#fff;font-weight:900}.member-list b{font-size:11px;color:#244965}.member-list small{font-size:8px;color:#7890a4}.manage-block{border-top:1px solid #e7eef4;padding-top:14px;margin-top:14px}.manage-block h4{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#385b77;margin:0 0 8px}.manage-inline{display:flex;gap:8px}.manage-inline select{flex:1;border:1px solid #dce8f1;border-radius:10px;padding:9px;background:#fff;color:#3e5b73}.manage-block>small{display:block;margin-top:6px;color:#8697a7;font-size:9px}.secondary{border:1px solid #cfe0ec;background:#f7fbfe;color:#23699f;border-radius:10px;padding:9px 12px;font-size:10px;font-weight:800;cursor:pointer}.manage-actions{display:flex;gap:8px;flex-wrap:wrap;border-top:1px solid #e7eef4;margin-top:16px;padding-top:16px}.danger-soft,.danger{border-radius:10px;padding:10px 13px;font-size:10px;font-weight:850;cursor:pointer}.danger-soft{border:1px solid #f4c8c8;background:#fff8f8;color:#c14646}.danger{border:0;background:#d64242;color:#fff}.room-success{padding:6px 0 2px}@media(max-width:700px){.member-list{grid-template-columns:1fr}.manage-inline{flex-direction:column}.manage-actions>*{flex:1}}

/* UI13 — Conversation Workspace */
.conversation-workspace{min-height:calc(100vh - 116px)}
.workspace-loading{min-height:55vh;display:grid;place-items:center}
.workspace-error .workspace-back{margin-bottom:12px}
.workspace-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:15px;align-items:center;background:linear-gradient(120deg,#082f59,#0c568f);color:#fff;border-radius:20px;padding:16px 18px;box-shadow:0 14px 32px #123d6520;position:relative;overflow:hidden}
.workspace-top:after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;right:-90px;top:-145px;background:#57bdff1b;pointer-events:none}
.workspace-back{border:1px solid #d8e6f1;background:#fff;color:#315a78;border-radius:10px;padding:9px 11px;font-size:10px;font-weight:800;cursor:pointer;white-space:nowrap}
.workspace-top .workspace-back{border-color:#ffffff35;background:#ffffff12;color:#fff;position:relative;z-index:1}
.workspace-title{min-width:0;position:relative;z-index:1}.workspace-title .eyebrow{color:#91d2ff}.workspace-title h1{font-size:clamp(21px,1.45vw,29px);line-height:1.1;margin:4px 0 5px;letter-spacing:-.035em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.workspace-title p{font-size:10px;color:#cde2f3;margin:0}.workspace-title p b{color:#fff}
.workspace-clock{min-width:82px;text-align:center;border:1px solid #ffffff28;background:#ffffff10;border-radius:14px;padding:9px 11px;position:relative;z-index:1}.workspace-clock small,.workspace-clock strong{display:block}.workspace-clock small{font-size:7px;font-weight:900;letter-spacing:.16em;color:#aad4ef}.workspace-clock strong{font-size:21px;margin-top:3px;letter-spacing:.04em}
.workspace-members{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:9px;margin:12px 0}
.workspace-member{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:9px;background:#fff;border:1px solid #e0ebf3;border-radius:13px;padding:9px 10px;box-shadow:0 5px 16px #17466f0b;min-width:0}.workspace-member.host{border-color:#f3d59b;background:linear-gradient(135deg,#fffaf1,#fff)}.workspace-member.ready{border-color:#bde8d3}.workspace-avatar{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,#0b6ebf,#18a6dc);color:#fff;font-size:13px;font-weight:900}.workspace-member.host .workspace-avatar{background:linear-gradient(135deg,#ffad1c,#f77a18)}.workspace-member b,.workspace-member small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.workspace-member b{font-size:10.5px;color:#244762}.workspace-member small{font-size:8px;color:#8295a5;margin-top:2px}.member-ready,.member-notready,.member-speaking-ready{font-size:8px;font-weight:850;border-radius:999px;padding:5px 7px;white-space:nowrap}.member-ready{background:#e8f8f0;color:#11865a}.member-notready{background:#f1f5f8;color:#7a8e9f}.member-speaking-ready{background:#eaf5ff;color:#1770b7}
.workspace-stage{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}.conversation-focus,.workspace-chat{background:#fff;border:1px solid #deeaf3;border-radius:18px;box-shadow:0 8px 24px #153f6510}.conversation-focus{padding:18px;min-height:210px;display:flex;flex-direction:column}.focus-label{font-size:8px;font-weight:900;letter-spacing:.15em;color:#7e94a7}.conversation-focus>#wsFocus{flex:1;display:grid;align-items:center}.focus-waiting{display:flex;align-items:center;justify-content:center;gap:18px;max-width:620px;margin:auto}.waiting-ring{width:76px;height:76px;flex:0 0 76px;border-radius:50%;display:grid;place-items:center;border:8px solid #e5f1f9;border-top-color:#1592d2;background:#f8fcff;color:#174c70;font-size:16px;font-weight:900}.focus-waiting h2,.focus-active h2,.focus-finished b{color:#173d60}.focus-waiting h2{font-size:20px;margin:0 0 7px}.focus-waiting p,.focus-active p,.focus-finished p{font-size:11px;line-height:1.55;color:#71879a;margin:0}.focus-active{text-align:center;max-width:720px;margin:auto}.focus-active h2{font-size:clamp(18px,1.25vw,24px);line-height:1.35;margin:13px auto 8px}.focus-active .secondary{margin-top:13px}.live-pill{display:inline-flex;align-items:center;gap:7px;color:#0c8b5d;background:#e9faf2;border-radius:999px;padding:6px 9px;font-size:8px;font-weight:900;letter-spacing:.11em}.live-pill i{width:7px;height:7px;border-radius:50%;background:#18bc7c;box-shadow:0 0 0 4px #18bc7c16}.focus-finished{text-align:center;max-width:600px;margin:auto}.focus-finished b{font-size:20px}.focus-finished p{margin-top:8px}
.workspace-controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center;border-top:1px solid #ecf2f6;margin-top:13px;padding-top:13px}.workspace-controls button{min-height:38px}.workspace-controls .primary:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}.ready-button{border:1px solid #b8d7ec;background:#f5fbff;color:#24678f;border-radius:10px;padding:9px 13px;font-size:10px;font-weight:850;cursor:pointer}.ready-button.active{border-color:#98ddbc;background:#eaf9f2;color:#0d8557}.workspace-audio{display:flex;align-items:center;gap:6px;border:1px solid #e0e8ee;background:#f6f8fa;color:#93a1ad;border-radius:10px;padding:9px 12px;font-size:9px;font-weight:800}.workspace-audio .svg-icon{width:15px;height:15px}
.workspace-chat{overflow:hidden}.chat-head{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 15px;border-bottom:1px solid #e8eff5;background:#fbfdff}.chat-head b{font-size:11px;color:#244964}.chat-head small{font-size:9px;color:#91a0ae}.chat-head>span{font-size:8px;color:#5f7a90;background:#eef5f9;border-radius:999px;padding:5px 8px}.chat-messages{height:260px;overflow:auto;padding:13px 15px;background:linear-gradient(180deg,#fff,#fbfdff)}.chat-empty{height:100%;display:grid;place-items:center;color:#9aa9b6;font-size:10px}.chat-system{text-align:center;margin:9px 0}.chat-system span{display:inline-block;background:#f1f5f8;color:#7a8d9d;border-radius:999px;padding:5px 9px;font-size:8px}.chat-message{display:flex;gap:8px;align-items:flex-start;margin:9px 0;max-width:82%}.chat-message.mine{margin-left:auto;flex-direction:row-reverse}.chat-avatar{width:29px;height:29px;flex:0 0 29px;border-radius:9px;display:grid;place-items:center;background:#e8f3fc;color:#2470a5;font-size:10px;font-weight:900}.chat-message>div:last-child{min-width:0}.chat-message small{display:block;color:#8b9ba8;font-size:7.5px;margin:0 0 3px 3px}.chat-message p{margin:0;background:#f0f6fa;color:#365970;border-radius:4px 12px 12px 12px;padding:8px 10px;font-size:10px;line-height:1.45;word-break:break-word}.chat-message.mine p{background:#0d75c8;color:#fff;border-radius:12px 4px 12px 12px}.chat-message.mine small{text-align:right;margin-right:3px}.chat-compose{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;padding:10px 12px;border-top:1px solid #e8eff5;background:#fff}.chat-compose textarea{resize:none;min-height:42px;max-height:90px;border:1px solid #dce7ef;border-radius:11px;padding:9px 10px;outline:0;font-size:10px;color:#34536c;background:#fafdff}.chat-compose textarea:focus{border-color:#97c8ea;box-shadow:0 0 0 3px #1991d80d}.chat-compose .primary{align-self:stretch;min-width:62px}.chat-compose button:disabled{opacity:.45;cursor:not-allowed}
.workspace-guide-rail{overflow:visible}.workspace-guide-rail .conversation-guide{position:sticky;top:88px;max-height:calc(100vh - 104px);overflow:auto;background:#ffffffd8;backdrop-filter:blur(14px);border:1px solid #dce9f4;border-radius:18px;padding:16px;box-shadow:0 8px 24px #234c7410}.guide-header h3{font-size:18px;color:#173d60;margin:5px 0 6px;letter-spacing:-.02em}.guide-header p{font-size:10px;line-height:1.5;color:#778b9d;margin:0}.guide-meta{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}.guide-meta span,.role-chips span{font-size:8px;background:#edf6fc;color:#3c6d91;border-radius:7px;padding:5px 7px;font-weight:750}.guide-block{border-top:1px solid #e8eff5;padding-top:12px;margin-top:12px}.guide-block h4{margin:0 0 8px;font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:#587288}.role-chips{display:flex;gap:6px;flex-wrap:wrap}.prompt-list{display:flex;flex-direction:column;gap:6px}.prompt-list button{display:grid;grid-template-columns:22px 1fr;gap:8px;align-items:flex-start;border:1px solid #e0ebf3;background:#f9fcfe;border-radius:10px;padding:8px;text-align:left;color:#46657c;cursor:pointer}.prompt-list button:hover{border-color:#acd3ed;background:#f4faff}.prompt-list b{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;background:#e4f2fd;color:#0b72c2;font-size:8px}.prompt-list span{font-size:9.5px;line-height:1.4}.expression-list{display:flex;gap:6px;flex-wrap:wrap}.expression-list button{border:1px solid #d9e8f2;background:#fff;color:#426783;border-radius:999px;padding:6px 8px;font-size:8.5px;cursor:pointer}.expression-list button:hover{background:#eef8ff;border-color:#9fcbea}.guide-note{margin-top:14px;border-radius:11px;background:linear-gradient(135deg,#f2f8ff,#fff8e9);padding:10px;color:#668096;font-size:8.5px;line-height:1.5}.workspace-guide-mobile{display:none}
@media(max-width:1050px){.workspace-guide-mobile{display:block}.workspace-guide-mobile details{background:#fff;border:1px solid #dce9f3;border-radius:16px;padding:10px 13px}.workspace-guide-mobile summary{cursor:pointer;font-size:10px;font-weight:850;color:#285a7e}.workspace-guide-mobile .conversation-guide{padding:12px 0 2px}.workspace-guide-mobile .guide-note{margin-bottom:3px}.workspace-top{grid-template-columns:auto minmax(0,1fr)}.workspace-clock{grid-column:2;justify-self:start}.workspace-members{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.workspace-top{display:flex;flex-wrap:wrap;align-items:flex-start}.workspace-title{order:3;flex-basis:100%}.workspace-title h1{white-space:normal}.workspace-clock{margin-left:auto}.workspace-members{grid-template-columns:1fr}.workspace-member{grid-template-columns:38px minmax(0,1fr) auto}.focus-waiting{align-items:flex-start;flex-direction:column}.waiting-ring{width:62px;height:62px;flex-basis:62px;border-width:6px}.workspace-controls>*{flex:1 1 calc(50% - 6px)}.chat-messages{height:230px}.chat-head small{display:none}.chat-compose{grid-template-columns:1fr}.chat-compose .primary{height:38px}.workspace-top{border-radius:16px}}
@media(max-width:1200px){.workspace-guide-mobile{display:block}}

/* UI14 — portable realtime workspace */
.workspace-clock{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.realtime-status{display:inline-flex;align-items:center;justify-content:center;gap:5px;margin-top:5px;font-size:7px;font-weight:850;letter-spacing:.03em;color:#b8d4e8;white-space:nowrap}
.realtime-status i{width:6px;height:6px;border-radius:50%;background:#91a9ba;box-shadow:0 0 0 3px #ffffff12}
.realtime-status.live{color:#bff6db}.realtime-status.live i{background:#22cf87;box-shadow:0 0 0 3px #22cf8726}
.realtime-status.connecting{color:#c7deee}.realtime-status.connecting i{background:#69b9ea;animation:vecPulse 1.2s infinite}
.realtime-status.reconnecting{color:#ffd8a1}.realtime-status.reconnecting i{background:#ffae3e;animation:vecPulse .9s infinite}
@keyframes vecPulse{0%,100%{opacity:.45;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.workspace-avatar-wrap{position:relative;width:36px;height:36px}
.workspace-avatar-wrap .workspace-avatar{width:36px;height:36px}
.presence-dot{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;background:#a9b7c3;border:2px solid #fff;box-shadow:0 1px 4px #143c6220}
.workspace-member.online .presence-dot{background:#22bf7d}
.workspace-member.offline{opacity:.72}.workspace-member.offline .presence-dot{background:#9daab5}
.member-offline{font-size:8px;font-weight:850;border-radius:999px;padding:5px 7px;white-space:nowrap;background:#f3f4f6;color:#8b98a4}
@media(max-width:680px){.realtime-status{font-size:6.5px}.workspace-clock{min-width:88px}}

/* UI15 — Pair 1:1 WebRTC audio */
#wsRemoteAudio{position:fixed;width:1px;height:1px;opacity:0;pointer-events:none;left:-9999px;top:-9999px}
.rtc-dock{display:none;align-items:center;justify-content:space-between;gap:14px;margin:0 0 12px;padding:12px 14px;border:1px solid #dce9f3;border-radius:16px;background:linear-gradient(135deg,#f9fcff 0%,#f2f9ff 55%,#fff9ed 100%);box-shadow:0 7px 22px #183f6510;min-height:58px}.rtc-dock.show{display:flex}.rtc-brand{display:flex;align-items:center;gap:11px;min-width:0}.rtc-brand>.rtc-icon{width:34px;height:34px;padding:8px;border-radius:11px;background:linear-gradient(135deg,#0e72c8,#19a7df);color:#fff;box-shadow:0 8px 18px #087fc52b;flex:0 0 34px}.rtc-brand div{min-width:0}.rtc-brand span,.rtc-brand b,.rtc-brand small{display:block}.rtc-brand span{font-size:7.5px;font-weight:900;letter-spacing:.13em;color:#4680aa}.rtc-brand b{margin:3px 0 2px;font-size:11px;color:#214b69;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rtc-brand b i{font-style:normal;color:#8ba3b5;margin:0 4px}.rtc-brand small{font-size:8.5px;color:#7890a2;line-height:1.35}.rtc-icon{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}.workspace-audio .rtc-icon{width:15px;height:15px}.workspace-audio.audio-on{border-color:#a8d5ef;background:#eef9ff;color:#116ea9;cursor:pointer;box-shadow:0 4px 12px #137db018}.workspace-audio.active{border-color:#9edfc1;background:#eaf9f2;color:#0d865a;cursor:pointer}.workspace-audio.muted{border-color:#f0c5c5;background:#fff5f5;color:#b64b4b;cursor:pointer}.rtc-state{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;font-size:8px;font-weight:850;padding:6px 9px;border-radius:999px;background:#eef3f6;color:#6e8495}.rtc-state>i{width:7px;height:7px;border-radius:50%;background:#9aabb8}.rtc-state.connected{background:#e9f9f1;color:#0c8757}.rtc-state.connected>i{background:#20c47c;box-shadow:0 0 0 4px #20c47c18}.rtc-state.connecting,.rtc-state.waiting{background:#eaf5ff;color:#236e9e}.rtc-state.connecting>i,.rtc-state.waiting>i{background:#2c94d1;animation:vecPulse 1.15s infinite}.rtc-state.failed,.rtc-state.disconnected{background:#fff1eb;color:#b25d31}.rtc-state.failed>i,.rtc-state.disconnected>i{background:#ef8b55}.rtc-visual{height:28px;display:flex;align-items:center;gap:3px;margin-left:auto}.rtc-visual i{display:block;width:3px;height:7px;border-radius:5px;background:#9ab8cb;transition:.2s}.rtc-visual.connected i{background:#20b978;animation:rtcWave .85s ease-in-out infinite}.rtc-visual.connected i:nth-child(2){animation-delay:.12s}.rtc-visual.connected i:nth-child(3){animation-delay:.24s}.rtc-visual.connected i:nth-child(4){animation-delay:.36s}.rtc-visual.connected i:nth-child(5){animation-delay:.48s}.rtc-visual.connecting i,.rtc-visual.waiting i{background:#5aa9d8}.rtc-visual.failed i,.rtc-visual.disconnected i{background:#e59a76}@keyframes rtcWave{0%,100%{height:6px;opacity:.55}50%{height:23px;opacity:1}}
@media(max-width:850px){.rtc-dock{align-items:flex-start;flex-wrap:wrap}.rtc-visual{display:none}.rtc-state{margin-left:45px}.rtc-brand{flex:1 1 100%}}
@media(max-width:520px){.rtc-brand b{white-space:normal}.rtc-state{margin-left:0}.workspace-controls .workspace-audio{flex:1 1 100%}}

/* UI16 — Immersive English Café Hall */
.cafe-immersive{padding-bottom:4px}.cafe-entry{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin:2px 0 14px;padding:2px 2px 0}.cafe-entry-copy{max-width:760px}.cafe-entry h1{margin:5px 0 5px;color:#173a58;font-size:clamp(26px,2vw,38px);letter-spacing:-.045em;line-height:1.04}.cafe-entry h1 em{font-style:normal;color:#b66a26}.cafe-entry p{margin:0;color:#73879a;font-size:11.5px;line-height:1.55}.cafe-entry-live{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.cafe-entry-live span,.cafe-entry-live b{border:1px solid #dbe8f1;background:#fff;border-radius:999px;padding:8px 11px;font-size:9px;color:#637c90;box-shadow:0 5px 14px #173c6010}.cafe-entry-live span{font-weight:800;color:#28526f}.cafe-entry-live span i{display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#22c17c;box-shadow:0 0 0 4px #22c17c18}.cafe-entry-live b{color:#a96125;background:#fffaf3;border-color:#f1dfca}.cafe-quickbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-bottom:12px}.cafe-quickbar button{min-width:0;height:48px;border:1px solid #dce8f1;border-radius:14px;background:#ffffffd9;color:#46657c;display:flex;align-items:center;justify-content:center;gap:8px;font-size:9.5px;font-weight:800;cursor:pointer;box-shadow:0 7px 18px #153e6110;transition:.18s}.cafe-quickbar button:hover{transform:translateY(-1px);border-color:#a9cce3;background:#fff}.cafe-quickbar button.accent{background:linear-gradient(135deg,#9b5d2b,#d18a45);border-color:#b7773c;color:#fff}.cafe-quickbar .svg-icon,.cafe-quickbar .hall-svg{width:18px;height:18px}.hall-svg{display:inline-grid;place-items:center;flex:0 0 auto}.hall-svg svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cafe-hall-wrap{margin:0 0 22px}.cafe-hall-stage{position:relative;min-height:clamp(500px,39vw,690px);border-radius:24px;overflow:hidden;border:1px solid #d8e4eb;box-shadow:0 18px 50px #17354f1a;background:#4c3426;isolation:isolate}.cafe-hall-photo{position:absolute;inset:0;background-image:url('cafe.jpg');background-size:cover;background-position:center 36%;filter:saturate(.78) contrast(.94) brightness(.74);transform:scale(1.02);z-index:-4}.cafe-hall-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,15,10,.45) 0%,rgba(25,16,10,.14) 31%,rgba(18,14,10,.28) 100%),linear-gradient(90deg,rgba(18,26,29,.36),transparent 35%,transparent 66%,rgba(11,23,27,.28));z-index:-3}.cafe-hall-stage:after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(180deg,transparent,rgba(44,25,13,.42));z-index:-2;pointer-events:none}.cafe-hall-sign{position:absolute;left:50%;top:4.5%;transform:translateX(-50%);text-align:center;color:#fff;text-shadow:0 2px 12px #0008;pointer-events:none}.cafe-hall-sign span{display:block;font-size:7px;letter-spacing:.28em;font-weight:850;color:#f7d8ac}.cafe-hall-sign strong{display:block;font-size:clamp(19px,1.45vw,30px);letter-spacing:.05em;margin:2px 0;font-weight:850}.cafe-hall-sign small{font-size:8px;letter-spacing:.13em;color:#f4e7d3}.hall-topic-board,.hall-ai-corner,.hall-counter{position:absolute;border:0;cursor:pointer;z-index:4}.hall-topic-board{left:3.4%;top:16%;width:min(230px,22%);text-align:left;border-radius:10px;padding:13px 14px;background:linear-gradient(145deg,#203a32,#142c25);color:#fff;box-shadow:0 12px 28px #0005, inset 0 0 0 4px #7c5a3c;transform:rotate(-.6deg)}.hall-topic-board small,.hall-topic-board strong,.hall-topic-board span,.hall-topic-board i{display:block}.hall-topic-board small{font-size:6.5px;letter-spacing:.18em;color:#dfc19a;font-weight:900}.hall-topic-board strong{font-family:Georgia,serif;font-size:clamp(13px,1vw,18px);margin:6px 0 4px}.hall-topic-board span{font-size:7.5px;color:#c9d5cc}.hall-topic-board i{font-style:normal;font-size:7px;color:#f5bd75;margin-top:9px}.hall-ai-corner{right:3%;top:14%;display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:14px;background:#ffffffde;color:#315b73;box-shadow:0 10px 26px #07192735;backdrop-filter:blur(10px)}.hall-ai-corner .hall-svg{width:26px;height:26px;color:#537db8}.hall-ai-corner span{text-align:left}.hall-ai-corner small,.hall-ai-corner b,.hall-ai-corner em{display:block}.hall-ai-corner small{font-size:6px;letter-spacing:.14em;font-weight:900;color:#72899a}.hall-ai-corner b{font-size:10px;color:#2d536d;margin:2px 0}.hall-ai-corner em{font-style:normal;font-size:7px;color:#a67843}.hall-counter{right:2.7%;bottom:7%;display:flex;align-items:center;gap:9px;padding:10px 13px;border-radius:13px;background:linear-gradient(145deg,#74441f,#a56831);color:#fff;box-shadow:0 12px 26px #1c0d0555}.hall-counter .hall-svg{width:24px;height:24px;color:#ffd69b}.hall-counter span{text-align:left}.hall-counter small,.hall-counter b{display:block}.hall-counter small{font-size:6px;letter-spacing:.13em;color:#edd1ad}.hall-counter b{font-size:9px;margin-top:2px}.hall-plants{position:absolute;z-index:0;bottom:7%;width:55px;height:82px;opacity:.88}.hall-plants.plant-a{left:2.6%}.hall-plants.plant-b{right:17%}.hall-plants:after{content:"";position:absolute;left:16px;bottom:0;width:28px;height:30px;border-radius:4px 4px 12px 12px;background:#7f4f31;box-shadow:0 5px 10px #0003}.hall-plants i{position:absolute;bottom:26px;left:23px;width:18px;height:45px;border-radius:100% 0 100% 0;background:#4d7c52;transform-origin:bottom}.hall-plants i:nth-child(1){transform:rotate(-32deg)}.hall-plants i:nth-child(2){transform:rotate(4deg);height:54px}.hall-plants i:nth-child(3){transform:rotate(36deg);height:42px}.hall-room-layer{position:absolute;inset:0;z-index:2}.hall-room{position:absolute;width:clamp(145px,15%,215px);transform:translate(-50%,-50%);z-index:3}.hall-room-1{left:24%;top:49%}.hall-room-2{left:49%;top:62%}.hall-room-3{left:73%;top:46%}.hall-room-4{left:76%;top:71%}.hall-table-scene{display:block;position:relative;width:100%;height:90px;margin:auto;border:0;background:transparent;cursor:pointer;filter:drop-shadow(0 11px 12px #0005)}.hall-table-top{position:absolute;left:50%;top:50%;width:98px;height:58px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse at 45% 34%,#b7804e,#82502c 72%);border:2px solid #d2a16e;box-shadow:inset 0 0 0 5px #86542f55,0 7px 10px #2c160a66;color:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column}.hall-table-top b{font-size:13px;line-height:1}.hall-table-top small{font-size:5.5px;letter-spacing:.12em;color:#f2d7bb;margin-top:2px}.hall-room.pair .hall-table-top{width:78px;height:54px}.hall-chair{position:absolute;width:35px;height:25px;border-radius:45% 45% 30% 30%;background:linear-gradient(#4c6170,#283a46);border:1px solid #71848f;box-shadow:0 5px 8px #0004}.chair-a{left:8%;top:34%;transform:rotate(-82deg)}.chair-b{right:8%;top:34%;transform:rotate(82deg)}.chair-c{left:39%;top:3%;transform:rotate(1deg)}.chair-d{left:39%;bottom:1%;transform:rotate(180deg)}.hall-room.pair .chair-c,.hall-room.pair .chair-d{display:none}.hall-speaking{position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);display:flex;align-items:flex-end;gap:2px;height:13px}.hall-speaking i{width:3px;height:5px;background:#4cf0a2;border-radius:4px;animation:hallTalk .85s ease-in-out infinite;box-shadow:0 0 7px #42f1a7}.hall-speaking i:nth-child(2){animation-delay:.15s}.hall-speaking i:nth-child(3){animation-delay:.3s}.hall-speaking i:nth-child(4){animation-delay:.45s}@keyframes hallTalk{0%,100%{height:4px}50%{height:13px}}.hall-room-card{position:absolute;left:50%;bottom:calc(100% - 5px);transform:translate(-50%,8px);width:210px;opacity:0;visibility:hidden;background:#ffffffec;backdrop-filter:blur(14px);border:1px solid #ffffffbb;border-radius:15px;padding:12px;box-shadow:0 15px 34px #05172655;transition:.2s;pointer-events:none}.hall-room:hover .hall-room-card,.hall-room:focus-within .hall-room-card{opacity:1;visibility:visible;transform:translate(-50%,0);pointer-events:auto}.hall-room-card-top{display:flex;align-items:center;justify-content:space-between;gap:7px}.hall-room-card-top>span{font-size:6.5px;font-weight:900;letter-spacing:.12em;color:#667d8f;text-transform:uppercase}.hall-room-card-top>b{font-size:6.5px;border-radius:999px;padding:4px 6px;background:#edf4f8;color:#657d8d}.hall-room-card-top>b.active{background:#e7faef;color:#188258}.hall-room-card-top>b.waiting,.hall-room-card-top>b.open{background:#fff3df;color:#a7671f}.hall-room-card h3{margin:8px 0 3px;font-size:12px;color:#193d58}.hall-room-card p{margin:0;color:#8092a0;font-size:7.5px}.hall-room-card-bottom{display:flex;align-items:center;gap:6px;margin-top:10px}.seat-dots{display:flex;gap:2px}.seat-dots i{width:6px;height:6px;border-radius:50%;background:#d6e0e7}.seat-dots i.filled{background:#22bd7b}.hall-room-card-bottom small{font-size:7px;color:#8494a1}.hall-room-card-bottom button{margin-left:auto;border:0;border-radius:8px;background:#0e75c9;color:#fff;padding:6px 8px;font-size:7px;font-weight:850;cursor:pointer}.hall-room-card-bottom button:disabled{background:#dce5eb;color:#80909b}.hall-room.empty-table{opacity:.9}.hall-room.empty-table .hall-table-top{background:radial-gradient(ellipse at 45% 34%,#baa085,#876b52 72%);border-color:#d9c3ac}.hall-room.empty-table .hall-room-card h3{color:#6e5948}.hall-legend{position:absolute;left:50%;bottom:2.5%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;background:#13202acc;color:#e4edf3;border:1px solid #ffffff22;border-radius:999px;padding:7px 10px;backdrop-filter:blur(10px);z-index:4}.hall-legend span{display:flex;align-items:center;gap:5px;font-size:6.5px}.hall-legend i{width:6px;height:6px;border-radius:50%}.hall-legend .available{background:#22c17c}.hall-legend .waiting{background:#f2b451}.hall-legend .talking{background:#52a9ec}
.cafe-menu-section{scroll-margin-top:88px;padding:4px 0 3px}.cafe-menu-head{align-items:flex-end}.cafe-menu-head>div:first-child h2{margin:3px 0 0;font-size:20px;color:#1c405e;letter-spacing:-.025em}.cafe-menu-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.cafe-menu-card{min-height:0;display:grid;grid-template-columns:48px minmax(0,1fr) 30px;align-items:center;gap:12px;padding:13px 14px}.menu-card-icon{width:48px;height:48px;border-radius:14px;background:linear-gradient(145deg,#edf6fc,#fff8ed);display:grid;place-items:center;color:#236f9e}.menu-card-icon .svg-icon,.menu-card-icon .hall-svg{width:24px;height:24px}.cafe-menu-card .menu-card-main{min-width:0}.cafe-menu-card h3{margin:6px 0 3px;font-size:14px}.cafe-menu-card>p,.cafe-menu-card .menu-card-main>p{font-size:9px;line-height:1.35;margin:0 0 7px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.cafe-menu-card .topic-meta span{font-size:7.5px;padding:4px 6px}.menu-card-arrow{width:28px;height:28px;border:0;border-radius:50%;background:#edf5fb;color:#2276b0;cursor:pointer}.cafe-menu-card .topic-top>b,.cafe-menu-card .topic-category{font-size:6.5px}
.cafe-hall-rail{background:linear-gradient(180deg,#f5f0e8,#eaf4ff)!important}.cafe-board{background:linear-gradient(145deg,#213d35,#183029)!important;border-color:#31594c!important;color:#fff}.cafe-board-title span{display:block;font-size:7px;letter-spacing:.16em;font-weight:900;color:#d7ba93}.cafe-board-title b{display:block;margin-top:3px;font-family:Georgia,serif;font-size:18px;color:#fff}.cafe-board-stats{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:12px 0}.cafe-board-stats div{background:#ffffff0e;border:1px solid #ffffff12;border-radius:10px;padding:9px}.cafe-board-stats strong{display:block;font-size:17px;color:#ffd49c}.cafe-board-stats small{font-size:7px;color:#c9d8d0}.cafe-topic-of-day{width:100%;text-align:left;border:1px solid #a67b4d66;background:#10231e;color:#fff;border-radius:12px;padding:10px;cursor:pointer}.cafe-topic-of-day small,.cafe-topic-of-day b,.cafe-topic-of-day span{display:block}.cafe-topic-of-day small{font-size:6px;letter-spacing:.12em;color:#d4b083}.cafe-topic-of-day b{font-size:10px;margin:4px 0}.cafe-topic-of-day span{font-size:7px;color:#9eb8aa}.cafe-people .cafe-current-user,.cafe-people>button{display:grid;grid-template-columns:34px minmax(0,1fr) 9px;gap:8px;align-items:center;width:100%;border:0;border-top:1px solid #edf2f6;background:transparent;padding:8px 0;text-align:left;cursor:pointer}.cafe-people .cafe-current-user{border-top:0}.cafe-avatar{width:32px;height:32px;border-radius:10px;background:linear-gradient(145deg,#0d75c7,#34a7df);color:#fff;display:grid;place-items:center;font-size:10px;font-weight:900}.cafe-avatar.soft{background:#edf5fb;color:#34719a}.cafe-people b{display:block;font-size:9px;color:#284f6a}.cafe-people small{display:block;font-size:7px;color:#8a9ba7;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cafe-people i{width:7px;height:7px;border-radius:50%;background:#22bd7b;box-shadow:0 0 0 3px #22bd7b14}.cafe-people i.talking{background:#4a9fdb;animation:vecPulse 1.1s infinite}.cafe-none{font-size:8px;color:#8b9aa7;padding:8px 0}.cafe-etiquette p{display:grid;grid-template-columns:25px 1fr;gap:8px;margin:8px 0;align-items:start}.cafe-etiquette p b{width:25px;height:25px;border-radius:8px;background:#f2e7d8;color:#9e6a32;display:grid;place-items:center;font-size:7px}.cafe-etiquette p span{font-size:8px;line-height:1.45;color:#657b8d;padding-top:2px}
@media(max-width:1350px){.cafe-hall-stage{min-height:520px}.hall-topic-board{width:205px}.hall-room{width:155px}.hall-room-card{width:190px}.cafe-menu-grid{grid-template-columns:1fr 1fr}}
@media(max-width:1050px){.cafe-entry{align-items:flex-start;flex-direction:column}.cafe-entry-live{justify-content:flex-start}.cafe-hall-stage{min-height:540px}.hall-room-1{left:24%;top:50%}.hall-room-2{left:52%;top:66%}.hall-room-3{left:76%;top:48%}.hall-room-4{left:74%;top:73%}.cafe-menu-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.cafe-quickbar{grid-template-columns:1fr 1fr}.cafe-hall-stage{min-height:auto;padding:190px 12px 14px;background:#6b4a34}.cafe-hall-photo{height:190px;bottom:auto;background-position:center 35%}.cafe-hall-shade{height:190px;bottom:auto}.cafe-hall-stage:after{display:none}.cafe-hall-sign{top:25px}.hall-topic-board{left:12px;top:100px;width:180px;padding:9px}.hall-ai-corner{right:12px;top:105px;padding:8px}.hall-counter,.hall-plants,.hall-legend{display:none}.hall-room-layer{position:relative;inset:auto;display:grid;grid-template-columns:1fr;gap:9px;z-index:3}.hall-room,.hall-room-1,.hall-room-2,.hall-room-3,.hall-room-4{position:relative;left:auto;top:auto;width:100%;transform:none;display:grid;grid-template-columns:86px minmax(0,1fr);align-items:center;background:#fff;border:1px solid #e0e8ed;border-radius:14px;padding:8px;opacity:1}.hall-table-scene{width:82px;height:66px}.hall-table-top{width:66px;height:42px}.hall-room.pair .hall-table-top{width:58px;height:40px}.hall-chair{width:25px;height:18px}.hall-room-card{position:static;opacity:1;visibility:visible;transform:none!important;width:auto;box-shadow:none;border:0;background:transparent;backdrop-filter:none;padding:2px 4px;pointer-events:auto}.hall-room:hover .hall-room-card{transform:none}.hall-room-card p{display:none}.cafe-menu-grid{grid-template-columns:1fr}.cafe-menu-card{grid-template-columns:42px minmax(0,1fr) 28px}.menu-card-icon{width:42px;height:42px}.cafe-menu-head{align-items:flex-start;gap:10px;flex-direction:column}.topic-search{width:100%}.cafe-entry h1{font-size:26px}.cafe-entry p{font-size:10.5px}}
@media(max-width:460px){.hall-topic-board{width:160px}.hall-ai-corner span em{display:none}.hall-ai-corner{max-width:135px}.cafe-entry-live{gap:5px}.cafe-entry-live span,.cafe-entry-live b{padding:7px 8px;font-size:8px}.cafe-menu-card{gap:9px;padding:11px}.cafe-quickbar button{font-size:8px}}

/* UI17 — Full-screen English Café, warm realistic lobby with lightweight ambient motion. */
.app.cafe-fullscreen{
  display:block!important;
  width:100%;height:100vh;min-height:100vh;overflow:hidden;
  background:#160f0b;
}
.app.cafe-fullscreen>.sidebar,.app.cafe-fullscreen>.topbar,.app.cafe-fullscreen>.right{display:none!important}
.app.cafe-fullscreen>main{display:block!important;width:100%!important;height:100vh!important;min-height:100vh!important;padding:0!important;margin:0!important;background:#160f0b!important}
.app.cafe-fullscreen>main>#content{padding:0!important;width:100%!important;height:100vh!important;max-width:none!important;overflow:hidden!important}
.cafe-fs{position:relative;width:100%;height:100svh;min-height:600px;overflow:hidden;background:#19100b;color:#fff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial}
.cafe-fs-loading{height:100%;display:grid;place-items:center;color:#f4e6d5;background:radial-gradient(circle at 50% 30%,#3e2a1d,#17100c 65%)}
.cafe-fs-error{padding:30px}.cafe-fs-error>button{border:1px solid #ffffff33;background:#ffffff12;color:#fff;border-radius:12px;padding:10px 14px;cursor:pointer}
.cafe-fs-topbar{position:absolute;z-index:50;left:0;right:0;top:0;height:64px;padding:0 22px;display:flex;align-items:center;gap:22px;background:linear-gradient(180deg,rgba(9,12,18,.9),rgba(10,12,18,.68));border-bottom:1px solid #ffffff16;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);color:#fff}
.cafe-fs-brand{display:flex;align-items:center;gap:9px;min-width:255px}.cafe-fs-brand img{width:36px;height:36px;filter:drop-shadow(0 5px 10px #0008)}.cafe-fs-brand span{display:block}.cafe-fs-brand small,.cafe-fs-brand b{display:block;line-height:1.1}.cafe-fs-brand small{font-size:11px;font-weight:700;color:#e4edf7}.cafe-fs-brand b{font-size:13px;margin-top:3px;color:#f4bd72}
.cafe-fs-nav{display:flex;align-items:center;gap:5px;height:100%}.cafe-fs-nav button{height:38px;border:0;background:transparent;color:#dbe3eb;border-radius:12px;padding:0 12px;display:flex;align-items:center;gap:7px;font-size:11px;font-weight:650;cursor:pointer}.cafe-fs-nav button:hover{background:#ffffff0d}.cafe-fs-nav button.active{background:#f7e4c4;color:#2a231e;box-shadow:0 5px 18px #0003}.cafe-fs-nav .svg-icon,.cafe-fs-nav .hall-svg{width:17px;height:17px}
.cafe-fs-actions{margin-left:auto;display:flex;align-items:center;gap:8px}.cafe-online-pill{height:36px;border:1px solid #ffffff21;background:#111926a6;color:#fff;border-radius:999px;padding:0 11px;display:flex;align-items:center;gap:6px;cursor:pointer}.cafe-online-pill i{width:7px;height:7px;border-radius:50%;background:#35db8b;box-shadow:0 0 0 4px #35db8b20}.cafe-online-pill b{font-size:11px}.cafe-online-pill span{font-size:9px;color:#b7c3ce}.cafe-fs-bell{position:relative;width:36px;height:36px;border:0;background:#ffffff08;color:#e8eef4;border-radius:11px;display:grid;place-items:center;cursor:pointer}.cafe-fs-bell .svg-icon{width:18px;height:18px}.cafe-fs-bell>b{position:absolute;right:-2px;top:-4px;min-width:16px;height:16px;border-radius:999px;background:#f23042;color:#fff;font-size:9px;display:grid;place-items:center}.cafe-fs-user{height:40px;border:0;background:transparent;color:#fff;display:flex;align-items:center;gap:8px;padding:3px 6px;border-radius:11px;cursor:pointer}.cafe-fs-user:hover{background:#ffffff0b}.cafe-fs-user>span{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#f3d6ae,#8c5931);color:#302018;font-size:12px;font-weight:900}.cafe-fs-user>b{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}.cafe-fs-user .svg-icon{width:14px;height:14px;color:#aebbc7}.cafe-exit{height:36px;border:1px solid #ffffff33;background:#ffffff0a;color:#fff;border-radius:10px;padding:0 12px;cursor:pointer;font-size:11px}.cafe-exit:hover{background:#ffffff16}
.cafe-fs-hall{position:absolute;inset:0;padding-top:64px;overflow:hidden;background:#1b110b}.cafe-fs-bg{position:absolute;inset:64px 0 0;background:url('cafe-hall-bg.jpg') center center/cover no-repeat;transform:scale(1.012);filter:saturate(.97) contrast(1.02)}.cafe-fs-overlay{position:absolute;inset:64px 0 0;background:linear-gradient(90deg,rgba(11,13,17,.12),transparent 28%,transparent 70%,rgba(14,10,8,.2)),linear-gradient(180deg,rgba(0,0,0,.08),transparent 60%,rgba(10,7,5,.23));pointer-events:none}.cafe-fs-hall:after{content:"";position:absolute;inset:64px 0 0;box-shadow:inset 0 0 120px #07050455;pointer-events:none}
.cafe-ambient-glow{position:absolute;z-index:1;border-radius:50%;filter:blur(38px);opacity:.17;animation:cafeGlow 5.5s ease-in-out infinite alternate;pointer-events:none}.cafe-ambient-glow.a{width:280px;height:190px;background:#ffb44f;left:17%;top:14%}.cafe-ambient-glow.b{width:330px;height:220px;background:#ff8d35;right:12%;top:20%;animation-delay:1.4s}@keyframes cafeGlow{from{opacity:.11;transform:scale(.96)}to{opacity:.23;transform:scale(1.08)}}
.cafe-fs-sign{position:absolute;z-index:5;left:3.7%;top:13%;width:260px;color:#fff2df;text-shadow:0 4px 18px #000}.cafe-fs-sign strong,.cafe-fs-sign span{display:block}.cafe-fs-sign strong{font-family:Georgia,serif;font-style:italic;font-size:34px;font-weight:500;letter-spacing:-.03em;color:#ffe7c6}.cafe-fs-sign span{font-size:10px;letter-spacing:.12em;margin-top:5px;color:#f0d2a9}
.cafe-fs-topic-board{position:absolute;z-index:7;right:18%;top:17%;width:260px;border:1px solid #f3c68055;background:linear-gradient(145deg,rgba(27,27,22,.84),rgba(25,19,15,.76));color:#fff;border-radius:14px;padding:13px 15px;text-align:left;backdrop-filter:blur(8px);box-shadow:0 12px 26px #0004;cursor:pointer}.cafe-fs-topic-board small,.cafe-fs-topic-board b,.cafe-fs-topic-board span{display:block}.cafe-fs-topic-board small{font-size:7px;letter-spacing:.14em;color:#e8bd7e}.cafe-fs-topic-board b{font-family:Georgia,serif;font-size:18px;font-weight:500;color:#ffe6bd;margin:5px 0}.cafe-fs-topic-board span{font-size:8px;color:#d9d1c7;line-height:1.4}
.cafe-fs-ai{position:absolute;z-index:8;left:4.2%;bottom:22%;display:flex;align-items:center;gap:10px;border:1px solid #61a8ff70;background:linear-gradient(120deg,rgba(7,22,48,.88),rgba(22,56,102,.7));color:#fff;border-radius:18px;padding:11px 14px;box-shadow:0 0 26px #2b83ff42,0 12px 28px #0005;backdrop-filter:blur(8px);cursor:pointer}.cafe-fs-ai .hall-svg{width:32px;height:32px;color:#85c1ff}.cafe-fs-ai span{text-align:left}.cafe-fs-ai b,.cafe-fs-ai small{display:block}.cafe-fs-ai b{font-size:11px}.cafe-fs-ai small{font-size:8px;color:#b9d9fb;margin-top:2px}.cafe-fs-ai>i{width:7px;height:7px;border-radius:50%;background:#44e6a0;box-shadow:0 0 0 4px #44e6a020;animation:vecPulse 1.25s infinite}
.cafe-fs-tables{position:absolute;z-index:10;inset:64px 0 0}.cafe-fs-table{position:absolute;transform:translate(-50%,-50%);z-index:12}.cafe-fs-table.p1{left:25%;top:43%}.cafe-fs-table.p2{left:48.5%;top:36%}.cafe-fs-table.p3{left:70%;top:48%}.cafe-fs-table.p4{left:43%;top:66%}.cafe-fs-table.p5{left:70%;top:70%}.cafe-table-chip{min-width:185px;max-width:230px;border:1px solid #ffffffd6;background:rgba(255,252,247,.93);color:#1a2d43;border-radius:13px;padding:8px 10px;display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:9px;text-align:left;box-shadow:0 12px 30px #0004;backdrop-filter:blur(10px);cursor:pointer;transition:.18s ease}.cafe-fs-table:hover .cafe-table-chip,.cafe-fs-table:focus-within .cafe-table-chip{transform:translateY(-3px);box-shadow:0 18px 38px #0005}.cafe-table-num{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#143a67;color:#fff;font-size:12px;font-weight:900}.cafe-table-copy{min-width:0}.cafe-table-copy b,.cafe-table-copy small,.cafe-table-copy em{display:block}.cafe-table-copy b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cafe-table-copy small{font-size:8px;color:#687b8c;margin:2px 0}.cafe-table-copy em{font-style:normal;font-size:8px;color:#536879;display:flex;align-items:center;gap:5px}.cafe-host-mini{width:18px;height:18px;border-radius:50%;display:grid!important;place-items:center;background:#d9e9f6;color:#315b7a;font-size:6px;font-weight:900}.cafe-fs-table.active .cafe-table-chip{border-color:#ff956c;box-shadow:0 0 0 2px #ff6b4230,0 13px 32px #0005}.cafe-fs-table.waiting .cafe-table-chip{border-color:#f0c37f}.cafe-fs-wave{width:24px;height:22px;display:flex;align-items:center;justify-content:center;gap:2px}.cafe-fs-wave i{width:2px;height:5px;border-radius:3px;background:#f55c46;animation:cafeWave .75s ease-in-out infinite}.cafe-fs-wave i:nth-child(2){animation-delay:.12s}.cafe-fs-wave i:nth-child(3){animation-delay:.24s}.cafe-fs-wave i:nth-child(4){animation-delay:.36s}@keyframes cafeWave{0%,100%{height:5px}50%{height:17px}}
.cafe-table-pop{position:absolute;left:50%;bottom:calc(100% + 9px);width:230px;transform:translate(-50%,8px);padding:12px;background:rgba(255,255,255,.96);border:1px solid #fff;border-radius:14px;color:#17314b;box-shadow:0 18px 40px #0005;opacity:0;visibility:hidden;pointer-events:none;transition:.18s;backdrop-filter:blur(12px)}.cafe-fs-table:hover .cafe-table-pop,.cafe-fs-table:focus-within .cafe-table-pop{opacity:1;visibility:visible;transform:translate(-50%,0);pointer-events:auto}.cafe-table-pop-head{display:flex;justify-content:space-between;gap:8px;align-items:center}.cafe-table-pop-head span{font-size:7px;font-weight:850;letter-spacing:.1em;text-transform:uppercase;color:#6d8191}.cafe-table-pop-head b{font-size:7px;padding:4px 7px;border-radius:999px;background:#edf3f7;color:#62798b}.cafe-table-pop-head b.active{background:#ffe5de;color:#bd4935}.cafe-table-pop-head b.open,.cafe-table-pop-head b.waiting{background:#fff2d9;color:#9a651e}.cafe-table-pop h3{font-size:13px;margin:9px 0 4px}.cafe-table-pop p{font-size:8px;color:#6e8292;margin:0}.cafe-seat-line{display:flex;align-items:center;gap:8px;margin:10px 0}.cafe-table-pop>button{width:100%;border:0;background:#163b69;color:#fff;border-radius:9px;padding:8px;font-size:8px;font-weight:800;cursor:pointer}.cafe-table-pop>button:disabled{background:#dce4ea;color:#8999a5}.seat-dots{display:flex;gap:3px}.seat-dots i{width:6px;height:6px;border-radius:50%;background:#d7e0e7}.seat-dots i.on{background:#28bf79}
.cafe-create-orb{width:160px;height:104px;border:1px solid #f1bd7455;background:rgba(74,42,21,.65);backdrop-filter:blur(8px);border-radius:50%;color:#fff;box-shadow:0 0 0 3px #f1a84f25,0 10px 30px #0005;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:.2s}.cafe-create-orb:hover{transform:scale(1.04);background:rgba(98,55,25,.75);box-shadow:0 0 0 4px #f5b75a40,0 16px 36px #0005}.cafe-create-orb>b{width:37px;height:37px;border-radius:50%;background:#fff6e8;color:#9a642d;display:grid;place-items:center;font-size:27px;font-weight:400}.cafe-create-orb span{font-size:10px;font-weight:800;margin-top:6px}.cafe-create-orb small{font-size:7px;color:#eed8bd;margin-top:2px}
.cafe-steam{position:absolute;z-index:6;width:48px;height:54px;pointer-events:none;opacity:.45}.cafe-steam.s1{left:18%;bottom:14%}.cafe-steam.s2{right:8%;bottom:18%}.cafe-steam i{position:absolute;bottom:0;width:8px;height:38px;border-left:2px solid #fff7;border-radius:50%;animation:cafeSteam 3.8s ease-in-out infinite}.cafe-steam i:nth-child(2){left:12px;animation-delay:.8s}.cafe-steam i:nth-child(3){left:24px;animation-delay:1.6s}@keyframes cafeSteam{0%{opacity:0;transform:translateY(8px) scaleX(.7)}35%{opacity:.8}100%{opacity:0;transform:translateY(-28px) translateX(7px) scaleX(1.3)}}
.cafe-fs-dock{position:absolute;z-index:35;left:50%;bottom:18px;transform:translateX(-50%);height:58px;display:flex;align-items:center;gap:3px;padding:6px;background:rgba(13,18,27,.86);border:1px solid #ffffff25;border-radius:22px;box-shadow:0 18px 42px #0007;backdrop-filter:blur(15px)}.cafe-fs-dock button{height:46px;border:0;background:transparent;color:#e6edf4;border-radius:16px;padding:0 17px;display:flex;align-items:center;gap:7px;font-size:9px;font-weight:750;white-space:nowrap;cursor:pointer}.cafe-fs-dock button:hover{background:#ffffff0d}.cafe-fs-dock button.active{background:#f4dfbe;color:#30261d}.cafe-fs-dock .svg-icon,.cafe-fs-dock .hall-svg{width:18px;height:18px}.cafe-fs-dock button>b{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#e95c43;color:#fff;display:grid;place-items:center;font-size:8px}.cafe-fullscreen-btn{position:absolute;z-index:35;right:18px;bottom:20px;width:40px;height:40px;border:1px solid #ffffff24;background:rgba(13,18,27,.75);color:#fff;border-radius:12px;backdrop-filter:blur(10px);cursor:pointer;font-size:17px}
.cafe-fs-info{position:absolute;z-index:45;right:15px;top:76px;width:310px;max-height:calc(100vh - 96px);overflow:auto;padding:13px;background:rgba(15,20,27,.92);border:1px solid #ffffff20;border-radius:18px;color:#edf4fa;box-shadow:0 24px 70px #0009;backdrop-filter:blur(18px);transform:translateX(calc(100% + 30px));opacity:0;visibility:hidden;transition:.25s ease}.cafe-fs-info.open{transform:none;opacity:1;visibility:visible}.cafe-drawer-close{position:absolute;right:10px;top:9px;border:0;background:#ffffff0d;color:#fff;width:28px;height:28px;border-radius:9px;cursor:pointer}.cafe-fs-info section{padding:10px 8px;border-top:1px solid #ffffff12}.cafe-fs-info section:first-of-type{border-top:0}.cafe-info-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}.cafe-info-title>b{font-size:11px}.cafe-info-title>span{font-size:8px;color:#b9c6d1;display:flex;gap:5px;align-items:center}.cafe-info-title>span i{width:6px;height:6px;border-radius:50%;background:#3cde91}.cafe-avatar-strip{display:flex;gap:5px;align-items:center}.cafe-avatar-strip button,.cafe-avatar-strip em{width:31px;height:31px;border-radius:50%;border:2px solid #ffffff33;display:grid;place-items:center;font-size:7px;font-weight:900}.cafe-avatar-strip button{background:linear-gradient(145deg,#385b79,#d18b58);color:#fff;cursor:pointer}.cafe-avatar-strip em{font-style:normal;background:#ffffff10;color:#ccd8e2}.cafe-info-stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:12px;border-top:1px solid #ffffff12;padding-top:10px}.cafe-info-stats div{text-align:center;border-left:1px solid #ffffff12}.cafe-info-stats div:first-child{border-left:0}.cafe-info-stats b,.cafe-info-stats span{display:block}.cafe-info-stats b{font-size:15px;color:#ffd596}.cafe-info-stats span{font-size:7px;color:#a9b7c2;margin-top:2px}.cafe-info-topic{width:100%;border:1px solid #ffffff14;background:#ffffff08;color:#fff;border-radius:12px;padding:10px;display:grid;grid-template-columns:34px minmax(0,1fr) 12px;align-items:center;gap:8px;text-align:left;cursor:pointer}.cafe-info-topic>.svg-icon{width:28px;height:28px;color:#ff6d54}.cafe-info-topic b,.cafe-info-topic small{display:block}.cafe-info-topic b{font-size:10px}.cafe-info-topic small{font-size:7px;color:#aebbc5;line-height:1.35;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.cafe-host-list button{width:100%;display:grid;grid-template-columns:30px minmax(0,1fr) 30px;align-items:center;gap:8px;border:0;border-top:1px solid #ffffff0d;background:transparent;color:#fff;padding:8px 0;text-align:left;cursor:pointer}.cafe-host-list button:first-child{border-top:0}.cafe-host-list button>i{width:29px;height:29px;border-radius:50%;display:grid;place-items:center;background:#ffffff11;color:#fff;font-style:normal;font-size:7px;font-weight:900}.cafe-host-list span b,.cafe-host-list span small{display:block}.cafe-host-list span b{font-size:9px}.cafe-host-list span small{font-size:7px;color:#a8b6c2;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cafe-host-list button>em{font-style:normal;font-size:8px;color:#d9e3eb}.cafe-etiquette-dark p{font-size:8px;color:#b9c6cf;margin:7px 0}
.cafe-menu-shade{position:absolute;z-index:40;inset:64px 0 0;background:#05060855;opacity:0;visibility:hidden;transition:.2s}.cafe-menu-shade.open{opacity:1;visibility:visible}.cafe-fs-menu{position:absolute;z-index:46;left:24px;right:24px;bottom:18px;max-height:52vh;overflow:auto;background:rgba(250,248,244,.97);color:#1a2e46;border:1px solid #fff;border-radius:20px;padding:17px 18px;box-shadow:0 24px 70px #0008;transform:translateY(calc(100% + 35px));opacity:0;visibility:hidden;transition:.25s ease;backdrop-filter:blur(16px)}.cafe-fs-menu.open{transform:none;opacity:1;visibility:visible}.cafe-menu-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.cafe-menu-top small{font-size:7px;font-weight:900;letter-spacing:.15em;color:#aa7441}.cafe-menu-top h2{font-size:18px;margin:3px 0 0}.cafe-menu-top>button{width:30px;height:30px;border:0;border-radius:9px;background:#e9ecee;color:#4d5f70;cursor:pointer}.cafe-fs-filters{display:flex;gap:6px;overflow:auto;padding:12px 0 10px}.cafe-fs-filters button{border:1px solid #e2e4e5;background:#fff;color:#5f6f7d;border-radius:999px;padding:6px 10px;font-size:8px;white-space:nowrap;cursor:pointer}.cafe-fs-filters button.active{background:#143b6b;color:#fff;border-color:#143b6b}.cafe-fs-topic-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.cafe-fs-topic-card{border:1px solid #e2e7ea;background:#fff;border-radius:13px;padding:10px;display:grid;grid-template-columns:36px minmax(0,1fr) 17px;align-items:center;gap:8px;text-align:left;color:#1f344d;cursor:pointer}.cafe-fs-topic-card:hover{border-color:#c4d4e1;box-shadow:0 7px 18px #17395210}.cafe-fs-topic-card>i{width:36px;height:36px;border-radius:10px;background:#eef4f8;color:#2774aa;display:grid;place-items:center;font-style:normal}.cafe-fs-topic-card>i .svg-icon,.cafe-fs-topic-card>i .hall-svg{width:19px;height:19px}.cafe-fs-topic-card span{min-width:0}.cafe-fs-topic-card small,.cafe-fs-topic-card b,.cafe-fs-topic-card em{display:block}.cafe-fs-topic-card small{font-size:6.5px;color:#9a6b41;text-transform:uppercase;font-weight:800}.cafe-fs-topic-card b{font-size:10px;margin:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cafe-fs-topic-card em{font-size:7px;font-style:normal;color:#7a8b99}.cafe-fs-topic-card>strong{font-size:13px;color:#5b7891}
@media(max-width:1180px){.cafe-fs-brand{min-width:190px}.cafe-fs-brand small{display:none}.cafe-fs-nav button{padding:0 9px}.cafe-fs-table.p1{left:24%}.cafe-fs-table.p2{left:50%}.cafe-fs-table.p3{left:73%}.cafe-fs-table.p4{left:45%}.cafe-fs-topic-board{right:10%;width:225px}.cafe-fs-topic-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.cafe-fs{min-height:100svh;overflow:auto}.app.cafe-fullscreen,.app.cafe-fullscreen>main,.app.cafe-fullscreen>main>#content{height:100svh;overflow:hidden!important}.cafe-fs-topbar{height:58px;padding:0 10px}.cafe-fs-brand{min-width:auto}.cafe-fs-brand img{width:32px;height:32px}.cafe-fs-brand b{font-size:11px}.cafe-fs-brand small{display:none}.cafe-fs-nav{display:none}.cafe-fs-actions{gap:4px}.cafe-online-pill span,.cafe-fs-user>b,.cafe-fs-user>.svg-icon,.cafe-exit span{display:none}.cafe-fs-user>span{width:30px;height:30px}.cafe-exit{width:34px;padding:0}.cafe-fs-hall{padding-top:58px}.cafe-fs-bg{inset:58px 0 0;background-position:center top;filter:saturate(.85) brightness(.78)}.cafe-fs-overlay{inset:58px 0 0;background:linear-gradient(180deg,rgba(11,10,8,.18),rgba(11,10,8,.5) 46%,rgba(9,10,13,.94) 78%)}.cafe-fs-sign{left:16px;top:82px}.cafe-fs-sign strong{font-size:26px}.cafe-fs-sign span{font-size:8px}.cafe-fs-topic-board{right:12px;top:82px;width:180px;padding:9px}.cafe-fs-topic-board b{font-size:13px}.cafe-fs-topic-board span{font-size:6.5px}.cafe-fs-ai{left:14px;top:190px;bottom:auto;padding:8px 10px}.cafe-fs-ai .hall-svg{width:24px;height:24px}.cafe-fs-tables{inset:58px 0 86px;display:grid;grid-template-columns:1fr;align-content:end;gap:7px;padding:250px 12px 10px;overflow:auto}.cafe-fs-table,.cafe-fs-table.p1,.cafe-fs-table.p2,.cafe-fs-table.p3,.cafe-fs-table.p4,.cafe-fs-table.p5{position:relative;left:auto;top:auto;transform:none;width:100%}.cafe-table-chip{width:100%;max-width:none;min-width:0}.cafe-table-pop{display:none}.cafe-create-orb{width:100%;height:58px;border-radius:13px;display:grid;grid-template-columns:37px minmax(0,1fr);grid-template-rows:1fr 1fr;text-align:left;padding:8px 10px}.cafe-create-orb>b{grid-row:1/3}.cafe-create-orb span{margin:0;font-size:10px}.cafe-create-orb small{margin:0}.cafe-fs-dock{left:10px;right:10px;bottom:10px;transform:none;width:auto;height:58px;justify-content:space-between}.cafe-fs-dock button{padding:0 8px;flex:1;justify-content:center}.cafe-fs-dock button span{display:none}.cafe-fullscreen-btn{display:none}.cafe-steam{display:none}.cafe-fs-info{top:67px;right:8px;left:8px;width:auto;max-height:calc(100vh - 84px)}.cafe-fs-menu{left:8px;right:8px;bottom:8px;max-height:75vh}.cafe-fs-topic-grid{grid-template-columns:1fr 1fr}.cafe-menu-shade{inset:58px 0 0}}
@media(max-width:560px){.cafe-fs-topic-board{display:none}.cafe-fs-tables{padding-top:205px}.cafe-fs-topic-grid{grid-template-columns:1fr}.cafe-fs-menu{padding:14px}.cafe-online-pill{padding:0 8px}.cafe-fs-bell{display:none}}
@media(prefers-reduced-motion:reduce){.cafe-ambient-glow,.cafe-fs-wave i,.cafe-fs-ai>i,.cafe-steam i{animation:none!important}.cafe-table-chip,.cafe-table-pop,.cafe-fs-info,.cafe-fs-menu,.cafe-menu-shade{transition:none!important}}


/* ============================================================
   UI18 — Café Scene Alignment + Visible Motion
   Keep the real café visible: compact table beacons by default,
   expand only on intent; add parallax + ambient movement.
   ============================================================ */
@media (min-width:901px){
  .cafe-fs-hall{--cafe-px:0px;--cafe-py:0px}
  .cafe-fs-bg{
    transform:scale(1.028) translate3d(var(--cafe-px),var(--cafe-py),0)!important;
    transition:transform .16s linear;
    will-change:transform;
    filter:saturate(.94) contrast(1.025) brightness(.83)!important;
  }
  /* Put room anchors beside the physical tables instead of over their centres. */
  .cafe-fs-table.p1{left:27%;top:47%}
  .cafe-fs-table.p2{left:49%;top:39%}
  .cafe-fs-table.p3{left:74.5%;top:49%}
  .cafe-fs-table.p4{left:47%;top:69%}
  .cafe-fs-table.p5{left:72%;top:72%}

  .cafe-fs-table{z-index:20;width:52px;height:52px}
  .cafe-fs-table::before{
    content:"";position:absolute;left:50%;top:45px;width:1px;height:21px;
    transform:translateX(-50%);background:linear-gradient(#fff9,#fff0);
    filter:drop-shadow(0 1px 2px #0008);pointer-events:none;opacity:.78
  }
  .cafe-fs-table::after{
    content:"";position:absolute;left:50%;top:63px;width:76px;height:22px;
    transform:translateX(-50%);border-radius:50%;border:1px solid #ffffff2e;
    background:radial-gradient(ellipse,rgba(255,210,142,.16),rgba(255,255,255,0) 70%);
    pointer-events:none;opacity:.75
  }
  .cafe-table-chip{
    width:48px!important;min-width:48px!important;max-width:48px!important;height:48px;
    padding:0!important;border-radius:50%!important;display:grid!important;grid-template-columns:1fr!important;
    place-items:center!important;gap:0!important;background:rgba(16,32,47,.82)!important;
    border:1px solid #ffffffb8!important;box-shadow:0 8px 23px #0007, inset 0 0 0 2px #ffffff12!important;
    overflow:visible!important;backdrop-filter:blur(10px)!important;
    transition:transform .18s ease,box-shadow .18s ease,background .18s ease!important;
  }
  .cafe-table-num{width:34px!important;height:34px!important;font-size:11px!important;background:transparent!important}
  .cafe-table-copy{position:absolute;left:50%;top:52px;transform:translateX(-50%);width:128px;text-align:center;pointer-events:none}
  .cafe-table-copy>b{display:block!important;color:#fff!important;font-size:9px!important;font-weight:850!important;text-shadow:0 2px 7px #000,0 0 2px #000;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .cafe-table-copy>small,.cafe-table-copy>em{display:none!important}
  .cafe-host-mini{display:none!important}
  .cafe-fs-wave{position:absolute!important;left:38px;top:-5px;width:27px!important;height:18px!important;padding:3px 4px;border-radius:999px;background:#241916d9;border:1px solid #ff8c6f66;box-shadow:0 3px 12px #0006}
  .cafe-fs-table:hover .cafe-table-chip,.cafe-fs-table:focus-within .cafe-table-chip{transform:translateY(-4px) scale(1.07)!important;background:rgba(13,39,64,.94)!important;box-shadow:0 12px 28px #0008,0 0 0 5px #ffffff14!important}
  .cafe-fs-table.active .cafe-table-chip{border-color:#ff8165!important;animation:cafeRoomActivePulse 1.65s ease-in-out infinite}
  .cafe-fs-table.waiting .cafe-table-chip,.cafe-fs-table.open .cafe-table-chip{border-color:#f4c477!important;animation:cafeRoomWaiting 2.2s ease-in-out infinite}
  .cafe-fs-table:not(.active):not(.waiting):not(.open) .cafe-table-chip{border-color:#71d5aa!important}
  @keyframes cafeRoomActivePulse{0%,100%{box-shadow:0 8px 23px #0007,0 0 0 0 #ff6c4a36}50%{box-shadow:0 10px 26px #0008,0 0 0 10px #ff6c4a00}}
  @keyframes cafeRoomWaiting{0%,100%{box-shadow:0 8px 23px #0007,0 0 0 0 #f2bd6240}50%{box-shadow:0 10px 26px #0008,0 0 0 7px #f2bd6200}}
  /* Details appear only when the user asks for them, not permanently over the scene. */
  .cafe-table-pop{bottom:auto!important;top:76px!important;width:224px!important;z-index:40!important}
  .cafe-fs-table.p3 .cafe-table-pop,.cafe-fs-table.p5 .cafe-table-pop{left:auto!important;right:0!important;transform:translate(0,8px)!important}
  .cafe-fs-table.p3:hover .cafe-table-pop,.cafe-fs-table.p3:focus-within .cafe-table-pop,.cafe-fs-table.p5:hover .cafe-table-pop,.cafe-fs-table.p5:focus-within .cafe-table-pop{transform:translate(0,0)!important}

  /* Empty table is a subtle hotspot and no longer covers the actual table. */
  .cafe-fs-table.empty-table{width:58px;height:58px}
  .cafe-create-orb{width:54px!important;height:54px!important;border-radius:50%!important;padding:0!important;display:grid!important;place-items:center!important;background:rgba(116,68,31,.84)!important;border:1px solid #ffd9a58c!important;box-shadow:0 8px 24px #0007,0 0 0 0 #ffb85d44!important;animation:cafeCreatePulse 2.6s ease-in-out infinite!important;color:#fff!important}
  .cafe-create-orb>b{font-size:26px!important;line-height:1!important}.cafe-create-orb>span,.cafe-create-orb>small{position:absolute;top:60px;left:50%;transform:translateX(-50%);white-space:nowrap;text-shadow:0 2px 7px #000;color:#fff}.cafe-create-orb>span{font-size:9px!important;font-weight:850}.cafe-create-orb>small{top:73px;font-size:6.5px!important;color:#f6dcc2!important}
  @keyframes cafeCreatePulse{0%,100%{box-shadow:0 8px 24px #0007,0 0 0 0 #ffb85d42}50%{box-shadow:0 10px 28px #0008,0 0 0 12px #ffb85d00}}

  /* Visible but calm ambient motion. */
  .cafe-steam{z-index:30!important;opacity:.72!important}.cafe-steam.s1{left:10.5%!important;bottom:10.5%!important}.cafe-steam.s2{right:7.5%!important;bottom:26%!important}
  .cafe-steam i{border-left-color:#fff9!important;filter:drop-shadow(0 0 4px #fff5)}
  .cafe-lamp-glows{position:absolute;inset:64px 0 0;z-index:2;pointer-events:none;overflow:hidden}
  .cafe-lamp-glows i{position:absolute;width:150px;height:110px;border-radius:50%;background:radial-gradient(circle,rgba(255,193,106,.24),rgba(255,160,60,.08) 35%,transparent 72%);filter:blur(8px);animation:cafeLampBreathe 4.8s ease-in-out infinite alternate}
  .cafe-lamp-glows i:nth-child(1){left:9%;top:-2%}.cafe-lamp-glows i:nth-child(2){left:34%;top:0;animation-delay:1.1s}.cafe-lamp-glows i:nth-child(3){right:27%;top:1%;animation-delay:2.2s}.cafe-lamp-glows i:nth-child(4){right:5%;top:2%;animation-delay:.7s}
  @keyframes cafeLampBreathe{from{opacity:.36;transform:scale(.92)}to{opacity:.9;transform:scale(1.08)}}
  .cafe-dust{position:absolute;inset:64px 0 0;z-index:3;pointer-events:none;overflow:hidden;opacity:.6}
  .cafe-dust i{position:absolute;width:2px;height:2px;border-radius:50%;background:#ffe6b8;box-shadow:0 0 5px #ffc56b;animation:cafeDustFloat 10s linear infinite}
  .cafe-dust i:nth-child(1){left:12%;top:72%;animation-delay:-2s}.cafe-dust i:nth-child(2){left:23%;top:44%;animation-delay:-7s}.cafe-dust i:nth-child(3){left:37%;top:69%;animation-delay:-4s}.cafe-dust i:nth-child(4){left:51%;top:36%;animation-delay:-8s}.cafe-dust i:nth-child(5){left:63%;top:74%;animation-delay:-1s}.cafe-dust i:nth-child(6){left:76%;top:43%;animation-delay:-5s}.cafe-dust i:nth-child(7){left:87%;top:66%;animation-delay:-9s}.cafe-dust i:nth-child(8){left:43%;top:84%;animation-delay:-3s}
  @keyframes cafeDustFloat{0%{transform:translate3d(0,16px,0);opacity:0}15%{opacity:.75}75%{opacity:.42}100%{transform:translate3d(16px,-78px,0);opacity:0}}
  .cafe-fs-topic-board{animation:cafeBoardGlow 5.6s ease-in-out infinite alternate}
  @keyframes cafeBoardGlow{from{box-shadow:0 12px 26px #0004,0 0 0 0 #f0b65d00}to{box-shadow:0 14px 30px #0005,0 0 22px #f0b65d22}}
}

@media (min-width:1500px) and (min-height:820px){
  .cafe-fs-table.p1{left:28%;top:49%}.cafe-fs-table.p2{left:49.5%;top:40%}.cafe-fs-table.p3{left:75.5%;top:51%}.cafe-fs-table.p4{left:48.5%;top:70%}.cafe-fs-table.p5{left:72.5%;top:73%}
}

@media(prefers-reduced-motion:reduce){
  .cafe-fs-bg{transform:scale(1.028)!important;transition:none!important}
  .cafe-fs-table .cafe-table-chip,.cafe-create-orb,.cafe-lamp-glows i,.cafe-dust i,.cafe-fs-topic-board{animation:none!important}
}

/* UI19 — Non-obstructive Café markers. Runtime UI must never cover faces or table surfaces. */
@media (min-width:901px){
  .cafe-fs-tables{z-index:14;pointer-events:none}
  .cafe-fs-table{width:42px!important;height:42px!important;z-index:22!important;pointer-events:auto}
  .cafe-fs-table.p1{left:18.5%!important;top:57%!important}
  .cafe-fs-table.p2{left:46.5%!important;top:47%!important}
  .cafe-fs-table.p3{left:82%!important;top:59%!important}
  .cafe-fs-table.p4{left:53%!important;top:74%!important}
  .cafe-fs-table.p5{left:76%!important;top:76%!important}
  .cafe-fs-table::before,.cafe-fs-table::after{display:none!important}
  .cafe-table-chip,.cafe-table-pop,.cafe-table-num,.cafe-table-copy,.cafe-host-mini{display:none!important}
  .cafe-table-pin{position:relative;width:38px;height:38px;border-radius:50%;border:1px solid #fff9;background:rgba(10,28,45,.76);color:#fff;display:grid;place-items:center;box-shadow:0 6px 18px #0007,0 0 0 4px #07182922;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;padding:0}
  .cafe-table-pin:hover,.cafe-table-pin:focus-visible{transform:scale(1.12);outline:none;box-shadow:0 8px 22px #0008,0 0 0 7px #ffffff18}
  .pin-num{font-size:10px;font-weight:900;line-height:1;letter-spacing:.02em}
  .pin-state{position:absolute;right:-1px;bottom:1px;width:9px;height:9px;border-radius:50%;background:#32cf86;border:2px solid #10283d;box-shadow:0 0 8px #32cf8688}
  .cafe-fs-table.waiting .pin-state,.cafe-fs-table.open .pin-state{background:#f0b04b;box-shadow:0 0 8px #f0b04b88}
  .cafe-fs-table.active .pin-state{background:#ff735b;box-shadow:0 0 10px #ff735baa;animation:cafePinPulse 1.25s ease-in-out infinite}
  @keyframes cafePinPulse{0%,100%{transform:scale(.82);opacity:.78}50%{transform:scale(1.18);opacity:1}}
  .cafe-pin-count{position:absolute;left:50%;top:44px;transform:translateX(-50%);min-width:28px;height:15px;padding:0 5px;border-radius:999px;background:rgba(10,24,37,.78);border:1px solid #ffffff36;color:#fff;display:grid;place-items:center;font-size:6.5px;font-weight:850;white-space:nowrap;box-shadow:0 3px 10px #0005;pointer-events:none}
  .cafe-table-pin .cafe-fs-wave{position:absolute!important;left:43px!important;top:8px!important;width:25px!important;height:20px!important;background:rgba(18,22,30,.72)!important;border-radius:999px!important;border:1px solid #ff866b55!important;padding:3px 4px!important;box-shadow:0 4px 13px #0005!important}
  .cafe-create-pin{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid #ffe0ad99;background:rgba(111,67,35,.78);color:#fff;box-shadow:0 6px 18px #0007,0 0 0 0 #ffb2574a;cursor:pointer;animation:cafeCreatePin 2.4s ease-in-out infinite;backdrop-filter:blur(7px)}
  .cafe-create-pin b{font-size:23px;font-weight:500;line-height:1}.cafe-create-pin:hover{transform:scale(1.1)}
  @keyframes cafeCreatePin{0%,100%{box-shadow:0 6px 18px #0007,0 0 0 0 #ffb2574a}50%{box-shadow:0 8px 22px #0008,0 0 0 9px #ffb25700}}
  .cafe-fs-topic-board{right:18px!important;top:82px!important;width:205px!important;padding:9px 11px!important;opacity:.9}
  .cafe-fs-ai{left:18px!important;bottom:94px!important;padding:8px 10px!important;opacity:.92}
  .cafe-fs-sign{display:none!important}
  .cafe-fs-dock{z-index:35!important}
}

.cafe-selected-room{background:linear-gradient(145deg,#fdf8ef,#fff);border:1px solid #ecd9bd!important;border-radius:15px;margin-bottom:10px;box-shadow:0 8px 24px #4b2f1515}
.cafe-selected-kicker{font-size:7px;letter-spacing:.13em;font-weight:900;color:#a56b2e;margin-bottom:8px}
.cafe-selected-head{display:flex;gap:10px;align-items:flex-start;justify-content:space-between}.cafe-selected-head h3{margin:0;font-size:15px;color:#183a56}.cafe-selected-head p{margin:4px 0 0;font-size:8px;color:#7d8e9a;line-height:1.4}.cafe-selected-head>b{font-size:7px;padding:5px 7px;border-radius:999px;background:#edf3f7;color:#617b8d;white-space:nowrap}.cafe-selected-head>b.active{background:#ffe7df;color:#bd4f39}.cafe-selected-head>b.waiting,.cafe-selected-head>b.open{background:#fff2d8;color:#99651d}.cafe-selected-meta{display:flex;gap:6px;margin:10px 0}.cafe-selected-meta span{font-size:7px;padding:5px 7px;border-radius:999px;background:#f0f5f8;color:#5e7688}.cafe-selected-action{width:100%;border:0;background:#123e69;color:#fff;border-radius:10px;padding:9px;font-size:9px;font-weight:850;cursor:pointer}.cafe-selected-action:disabled{background:#dfe6eb;color:#8796a1}

@media(max-width:900px){
  .cafe-fs-tables{display:grid!important;grid-template-columns:1fr!important;align-content:end!important;gap:8px!important;padding:250px 12px 74px!important;overflow:auto!important}
  .cafe-fs-table,.cafe-fs-table.p1,.cafe-fs-table.p2,.cafe-fs-table.p3,.cafe-fs-table.p4,.cafe-fs-table.p5{position:relative!important;left:auto!important;top:auto!important;transform:none!important;width:100%!important;height:auto!important;display:grid!important;grid-template-columns:44px minmax(0,1fr)!important;align-items:center!important;background:rgba(255,255,255,.94)!important;border:1px solid #ffffffcc!important;border-radius:13px!important;padding:8px!important;box-shadow:0 8px 24px #0003!important}
  .cafe-table-pin{width:36px;height:36px;border-radius:50%;border:0;background:#153d68;color:#fff;display:grid;place-items:center;position:relative;padding:0}.pin-num{font-size:10px;font-weight:900}.pin-state{position:absolute;right:-1px;bottom:1px;width:8px;height:8px;border:2px solid #fff;border-radius:50%;background:#30c983}.cafe-fs-table.waiting .pin-state,.cafe-fs-table.open .pin-state{background:#efb24d}.cafe-fs-table.active .pin-state{background:#f36b53}.cafe-pin-count{position:static!important;transform:none!important;margin-left:8px;justify-self:start;background:#edf3f7;color:#526b7d;border-radius:999px;padding:4px 7px;font-size:8px;font-weight:800}.cafe-table-pin .cafe-fs-wave{display:none!important}.cafe-create-pin{width:36px;height:36px;border-radius:50%;border:0;background:#a56c35;color:#fff;display:grid;place-items:center}.cafe-create-pin b{font-size:22px}.cafe-fs-table.empty-table:after{content:'Tạo bàn mới';font-size:10px;font-weight:800;color:#71583f;margin-left:8px}.cafe-fs-info{z-index:90!important}
}

.cafe-pin-label{display:none}
@media(max-width:900px){
  .cafe-pin-label{display:block;border:0;background:transparent;text-align:left;padding:0 6px;color:#173650;min-width:0;cursor:pointer}
  .cafe-pin-label b,.cafe-pin-label small{display:block}.cafe-pin-label b{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cafe-pin-label small{font-size:7.5px;color:#7a8c99;margin-top:2px}
  .cafe-fs-table{grid-template-columns:44px minmax(0,1fr) auto!important}.cafe-pin-count{margin-left:0!important;justify-self:end!important}
  .cafe-fs-table.empty-table{grid-template-columns:44px minmax(0,1fr)!important}.cafe-fs-table.empty-table:after{align-self:center}
}

/* ============================================================
   UI20 — Clean Café Hall
   Goals:
   - use a clean photographic café background (remote, with local fallback)
   - never place labels/cards over faces or table surfaces
   - visible room anchors are tiny floor-edge beacons only
   - room details live in the right drawer
   - motion is ambient, subtle, and GPU-cheap
   ============================================================ */
@media (min-width:901px){
  .cafe-fs-bg{
    background-image:url('cafe-hall-bg.jpg')!important;
    background-position:center top!important;
    background-size:100% 100%!important;
    background-repeat:no-repeat!important;
    background-color:#1b110b!important;
    filter:saturate(.96) contrast(1.015) brightness(.86)!important;
    transform:none!important;
  }

  /* Keep scene photography visually clean. All informational blocks move out of it. */
  .cafe-fs-sign,.cafe-fs-topic-board,.cafe-fs-ai{display:none!important}
  .cafe-fs-overlay{
    background:
      linear-gradient(180deg,rgba(8,10,13,.09),transparent 28%,transparent 70%,rgba(9,7,5,.24)),
      linear-gradient(90deg,rgba(7,12,18,.16),transparent 16%,transparent 84%,rgba(8,10,13,.15))!important;
  }

  /* A slow moving warm-light wash makes the room feel alive without animating people. */
  .cafe-fs-hall::before{
    content:"";position:absolute;z-index:2;inset:64px 0 0;pointer-events:none;
    background:linear-gradient(108deg,transparent 22%,rgba(255,211,145,.08) 42%,rgba(255,244,215,.13) 50%,rgba(255,198,105,.06) 58%,transparent 76%);
    transform:translateX(-18%);animation:cafeSunSweep 18s ease-in-out infinite alternate;
    mix-blend-mode:screen;
  }
  @keyframes cafeSunSweep{from{transform:translateX(-22%);opacity:.38}to{transform:translateX(19%);opacity:.72}}

  /* Pins sit in negative-space/floor edges, not over people. */
  .cafe-fs-table{width:30px!important;height:30px!important;z-index:24!important;pointer-events:auto}
  .cafe-fs-table.p1{left:20%!important;top:69%!important}
  .cafe-fs-table.p2{left:42%!important;top:58%!important}
  .cafe-fs-table.p3{left:64%!important;top:67%!important}
  .cafe-fs-table.p4{left:37%!important;top:82%!important}
  .cafe-fs-table.p5{left:69%!important;top:82%!important}
  .cafe-fs-table.p6{left:84%!important;top:78%!important}

  .cafe-table-pin{
    width:26px!important;height:26px!important;border:1px solid #fff8!important;
    background:rgba(10,29,46,.78)!important;box-shadow:0 5px 13px #0008!important;
    backdrop-filter:blur(7px)!important;-webkit-backdrop-filter:blur(7px)!important;
  }
  .cafe-table-pin::before{
    content:"";position:absolute;inset:-7px;border:1px solid rgba(255,255,255,.24);border-radius:50%;
    opacity:.5;transform:scale(.72);animation:cafeBeaconBreath 2.6s ease-in-out infinite;pointer-events:none;
  }
  .cafe-fs-table.active .cafe-table-pin::before{border-color:#ff8b73aa;animation-duration:1.35s}
  .cafe-fs-table.waiting .cafe-table-pin::before,.cafe-fs-table.open .cafe-table-pin::before{border-color:#f2bb64aa}
  @keyframes cafeBeaconBreath{0%,100%{transform:scale(.68);opacity:.28}50%{transform:scale(1.22);opacity:.88}}
  .pin-num{font-size:8px!important}.pin-state{width:7px!important;height:7px!important;right:-2px!important;bottom:-1px!important;border-width:1.5px!important}

  /* Do not show participant counts or labels on the scene at rest. */
  .cafe-pin-count{display:none!important}
  .cafe-pin-label{display:none!important}
  .cafe-table-pin .cafe-fs-wave{display:none!important}

  /* Tiny active-room waveform floats beside the beacon only, never over people. */
  .cafe-fs-table.active::before{
    content:""!important;display:block!important;position:absolute!important;left:30px!important;top:8px!important;
    width:22px!important;height:10px!important;border-radius:999px!important;
    background:
      linear-gradient(90deg,transparent 0 8%,#ff8a70 8% 13%,transparent 13% 23%,#ff8a70 23% 30%,transparent 30% 41%,#ff8a70 41% 49%,transparent 49% 60%,#ff8a70 60% 66%,transparent 66% 76%,#ff8a70 76% 83%,transparent 83%)!important;
    filter:drop-shadow(0 0 5px #ff745c99)!important;opacity:.8!important;
    animation:cafeMiniWave 1s ease-in-out infinite!important;pointer-events:none!important;
  }
  @keyframes cafeMiniWave{0%,100%{transform:scaleY(.55);opacity:.55}50%{transform:scaleY(1.15);opacity:1}}

  /* Thin leader to floor edge; visible enough to associate the pin with a table. */
  .cafe-fs-table:not(.empty-table)::after{
    content:""!important;display:block!important;position:absolute!important;left:50%!important;top:27px!important;
    width:1px!important;height:14px!important;border:0!important;border-radius:0!important;
    background:linear-gradient(#fff7,transparent)!important;transform:translateX(-50%)!important;opacity:.6!important;pointer-events:none!important;
  }

  .cafe-create-pin{
    width:29px!important;height:29px!important;background:rgba(126,76,35,.82)!important;
    box-shadow:0 5px 14px #0008,0 0 0 0 #ffbd6a44!important;animation:cafeCreatePin 2.8s ease-in-out infinite!important;
  }
  .cafe-create-pin b{font-size:18px!important}
  .cafe-fs-table.empty-table::after{
    content:"Tạo bàn"!important;display:block!important;position:absolute!important;left:50%!important;top:34px!important;
    transform:translateX(-50%)!important;width:max-content!important;font-size:6.5px!important;font-weight:850!important;
    color:#fff!important;text-shadow:0 2px 6px #000!important;background:rgba(36,25,18,.58)!important;border:1px solid #ffffff24!important;
    border-radius:999px!important;padding:3px 6px!important;pointer-events:none!important;
  }

  /* Details are drawer-only on desktop. Hover no longer creates a floating card. */
  .cafe-table-pop{display:none!important}

  /* More visible ambient motion without clutter. */
  .cafe-lamp-glows{opacity:.78!important}.cafe-dust{opacity:.38!important}
  .cafe-steam.s1{left:8%!important;bottom:8%!important}.cafe-steam.s2{right:8%!important;bottom:18%!important}
  .cafe-steam i{animation-duration:4.8s!important}

  /* Bottom dock remains the only persistent action surface. */
  .cafe-fs-dock{bottom:18px!important;background:rgba(11,21,33,.82)!important;box-shadow:0 14px 35px #0006!important}
}

/* UI20 keeps the mobile list behavior from UI19. */
@media(max-width:900px){
  .cafe-fs-bg{
    background-image:url('cafe-hall-bg.jpg')!important;
    background-position:center top!important;
    background-size:cover!important;
    background-repeat:no-repeat!important;
    transform:none!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .cafe-fs-hall::before,.cafe-table-pin::before,.cafe-fs-table.active::before{animation:none!important}
}


/* UI20.3 — background framing fix: desktop always shows the full generated café scene. */
@media (min-width:901px){
  .cafe-fs-bg{
    background-image:url('cafe-hall-bg.jpg')!important;
    background-size:100% 100%!important;
    background-position:center top!important;
    background-repeat:no-repeat!important;
    transform:none!important;
  }
}

/* ============================================================
   UI20.4 — Café background hard lock (NO ZOOM / NO CROP)
   The photo layer is static at every viewport size. Motion belongs
   only to ambient overlays and UI elements.
   ============================================================ */
.cafe-fs-bg{
  background-image:url('cafe-hall-bg.jpg')!important;
  background-position:center top!important;
  background-size:100% 100%!important;
  background-repeat:no-repeat!important;
  transform:none!important;
  transition:none!important;
  will-change:auto!important;
}
@media(max-width:900px){
  .cafe-fs-bg{
    background-position:center top!important;
    background-size:100% 100%!important;
    transform:none!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .cafe-fs-bg{transform:none!important;transition:none!important}
}

/* UI20.5 — new VEC app icon */
.login-brand .login-app-icon{width:58px;height:58px;flex:0 0 58px;object-fit:contain;filter:drop-shadow(0 9px 15px #0b274f2c)}
.login-brand{gap:14px}
.sidebar .brand-logo,.cafe-fs-brand img{border-radius:22%;}

/* ============================================================
   UI20.7 — Café spatial tables + live occupancy
   - Table markers sit on the actual furniture in cafe-hall-bg.jpg.
   - The create-room marker lives at the coffee counter/reception.
   - Lightweight occupant silhouettes mirror the real room count.
   ============================================================ */
@media (min-width:901px){
  /* Physical table anchors, measured against the locked 16:9 café image. */
  .cafe-fs-table.p1{left:26%!important;top:42%!important}
  .cafe-fs-table.p2{left:54%!important;top:38%!important}
  .cafe-fs-table.p3{left:79%!important;top:46%!important}
  .cafe-fs-table.p4{left:47%!important;top:65%!important}
  .cafe-fs-table.p5{left:82%!important;top:62%!important}

  /* Occupants are intentionally illustrative/silhouette-like so the real photo remains dominant. */
  .cafe-table-people{
    position:absolute;left:50%;top:50%;width:220px;height:120px;
    transform:translate(-50%,-50%);pointer-events:none;z-index:1;
    filter:drop-shadow(0 4px 5px #0007);
  }
  .cafe-fs-table.p1 .cafe-table-people{transform:translate(-50%,-50%) scale(.92)}
  .cafe-fs-table.p2 .cafe-table-people{transform:translate(-50%,-50%) scale(.68)}
  .cafe-fs-table.p3 .cafe-table-people{transform:translate(-50%,-50%) scale(.82)}
  .cafe-fs-table.p4 .cafe-table-people{transform:translate(-50%,-50%) scale(1.12)}
  .cafe-fs-table.p5 .cafe-table-people{transform:translate(-50%,-50%) scale(1.08)}
  .cafe-person{position:absolute;width:15px;height:23px;display:block;opacity:.96}
  .cafe-person::before{
    content:"";position:absolute;left:50%;top:0;width:8px;height:8px;transform:translateX(-50%);
    border-radius:50%;background:#d8af8b;border:1px solid #ffe8d0aa;box-shadow:0 1px 2px #0006;
  }
  .cafe-person span{
    position:absolute;left:1px;right:1px;bottom:0;height:15px;border-radius:8px 8px 4px 4px;
    background:linear-gradient(180deg,#314f6c,#172b42);border:1px solid #ffffff24;
  }
  .cafe-person:nth-child(2) span{background:linear-gradient(180deg,#795640,#3b2a23)}
  .cafe-person:nth-child(3) span{background:linear-gradient(180deg,#526e49,#2c4029)}
  .cafe-person:nth-child(4) span{background:linear-gradient(180deg,#75546f,#3d2e3d)}

  /* Seat geometry around the marker/table center. */
  .cafe-table-people .seat-1{left:7%;top:38%}
  .cafe-table-people .seat-2{right:7%;top:38%}
  .cafe-table-people .seat-3{left:26%;bottom:0}
  .cafe-table-people .seat-4{right:26%;bottom:0}
  .cafe-table-people.people-1 .seat-1{left:43%;top:auto;bottom:-2px}
  .cafe-table-people.people-2 .seat-1{left:7%;top:44%}
  .cafe-table-people.people-2 .seat-2{right:7%;top:44%}
  .cafe-table-people.people-3 .seat-1{left:7%;top:38%}
  .cafe-table-people.people-3 .seat-2{right:7%;top:38%}
  .cafe-table-people.people-3 .seat-3{left:43%;bottom:-2px}
  .cafe-people-extra{
    position:absolute;right:13px;bottom:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;
    background:#142a40dd;border:1px solid #ffffff55;color:#fff;font:800 7px/15px Inter,system-ui;text-align:center;
    box-shadow:0 3px 8px #0006;
  }
  .cafe-fs-table.active .cafe-person::before{animation:cafePersonHead 1.8s ease-in-out infinite}
  .cafe-fs-table.active .cafe-person span{animation:cafePersonTalk 2.2s ease-in-out infinite;transform-origin:50% 100%}
  .cafe-fs-table.active .cafe-person:nth-child(2)::before,.cafe-fs-table.active .cafe-person:nth-child(2) span{animation-delay:.35s}
  .cafe-fs-table.active .cafe-person:nth-child(3)::before,.cafe-fs-table.active .cafe-person:nth-child(3) span{animation-delay:.7s}
  .cafe-fs-table.active .cafe-person:nth-child(4)::before,.cafe-fs-table.active .cafe-person:nth-child(4) span{animation-delay:1.05s}
  @keyframes cafePersonHead{0%,100%{margin-top:0}50%{margin-top:-1.5px}}
  @keyframes cafePersonTalk{0%,100%{transform:rotate(0deg)}50%{transform:rotate(2.2deg)}}

  /* Keep marker above the occupants and exactly on the tabletop. */
  .cafe-table-pin{position:relative!important;z-index:4!important}

  /* Reception/counter owns room creation; it is not another physical table. */
  .cafe-fs-counter-marker{
    position:absolute;left:88%;top:39%;transform:translate(-50%,-50%);
    z-index:28;pointer-events:auto;
  }
  .cafe-fs-counter-marker .cafe-create-pin{
    width:auto!important;height:34px!important;min-width:34px!important;padding:3px 9px 3px 3px!important;
    display:flex!important;align-items:center!important;gap:7px!important;border:1px solid #fff8!important;border-radius:999px!important;
    background:rgba(65,39,22,.82)!important;color:#fff!important;backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important;
    box-shadow:0 7px 18px #0008,0 0 0 0 #ffbd6a44!important;animation:cafeCreatePin 2.8s ease-in-out infinite!important;
  }
  .cafe-fs-counter-marker .cafe-create-pin>b{
    width:27px!important;height:27px!important;display:grid!important;place-items:center!important;border-radius:50%!important;
    background:#fff4df!important;color:#8b5929!important;font-size:18px!important;line-height:1!important;font-weight:500!important;flex:0 0 27px!important;
  }
  .cafe-fs-counter-marker .cafe-create-pin>span{display:block!important;text-align:left!important;line-height:1.05!important;margin:0!important}
  .cafe-fs-counter-marker .cafe-create-pin small,.cafe-fs-counter-marker .cafe-create-pin strong{display:block!important;white-space:nowrap!important}
  .cafe-fs-counter-marker .cafe-create-pin small{font-size:5.5px!important;letter-spacing:.12em!important;color:#e7cfb5!important;font-weight:850!important}
  .cafe-fs-counter-marker .cafe-create-pin strong{font-size:8px!important;color:#fff!important;margin-top:2px!important}
  .cafe-fs-counter-marker .cafe-create-pin:hover{transform:translateY(-2px)!important;background:rgba(87,50,24,.92)!important}
}

@media(max-width:900px){
  /* On small screens the café becomes an accessible room list; decorative occupants stay in the photo only. */
  .cafe-table-people{display:none!important}
  .cafe-fs-counter-marker{
    position:relative!important;left:auto!important;top:auto!important;transform:none!important;width:100%!important;height:auto!important;
    pointer-events:auto!important;z-index:24!important;
  }
  .cafe-fs-counter-marker .cafe-create-pin{
    width:100%!important;height:52px!important;border-radius:13px!important;padding:7px 10px!important;
    display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:9px!important;
    background:rgba(91,57,31,.92)!important;border:1px solid #ffffff45!important;color:#fff!important;box-shadow:0 8px 24px #0004!important;
  }
  .cafe-fs-counter-marker .cafe-create-pin>b{
    width:34px!important;height:34px!important;display:grid!important;place-items:center!important;border-radius:50%!important;
    background:#fff2dc!important;color:#8a582b!important;font-size:22px!important;flex:0 0 34px!important;
  }
  .cafe-fs-counter-marker .cafe-create-pin>span{display:block!important;text-align:left!important;margin:0!important}
  .cafe-fs-counter-marker .cafe-create-pin small,.cafe-fs-counter-marker .cafe-create-pin strong{display:block!important}
  .cafe-fs-counter-marker .cafe-create-pin small{font-size:7px!important;letter-spacing:.1em!important;color:#e6cdb4!important}
  .cafe-fs-counter-marker .cafe-create-pin strong{font-size:10px!important;color:#fff!important;margin-top:2px!important}
}

@media(prefers-reduced-motion:reduce){
  .cafe-fs-table.active .cafe-person::before,.cafe-fs-table.active .cafe-person span,.cafe-fs-counter-marker .cafe-create-pin{animation:none!important}
}

/* ============================================================
   UI20.8 — Café people + non-blocking table topic popover
   - Table details open next to the selected physical table.
   - Right-side counter remains visually unobstructed.
   - Clear close controls for room/topic overlays.
   - Adds lightweight ambient café staff/patrons; real room occupants
     still come from participant counts.
   ============================================================ */

/* Make modal close unmistakable, especially inside the Café. */
.modal-close{
  z-index:8!important;border:1px solid #d5e2ec!important;background:#173f66!important;color:#fff!important;
  box-shadow:0 5px 14px #0d294044!important;font-weight:700!important;line-height:1!important;
}
.modal-close:hover{background:#0e6fbd!important;transform:translateY(-1px)}
.modal-backdrop.cafe-context{
  place-items:center start!important;
  padding:82px 24px 88px clamp(20px,4vw,70px)!important;
  background:linear-gradient(90deg,rgba(4,18,32,.82) 0%,rgba(4,18,32,.68) 48%,rgba(4,18,32,.22) 77%,rgba(4,18,32,.08) 100%)!important;
  backdrop-filter:blur(3px)!important;
}
.modal-backdrop.cafe-context .modal-card{
  width:min(660px,calc(100vw - 430px))!important;
  max-height:calc(100vh - 170px)!important;
  margin:0!important;
}

/* Dedicated table card: compact, anchored and counter-safe. */
.cafe-room-popover{
  position:absolute;z-index:44;width:min(270px,22vw);min-width:230px;
  padding:15px 15px 14px;border:1px solid #ffffff38;border-radius:16px;
  background:rgba(13,27,40,.94);color:#edf5fb;box-shadow:0 20px 52px #0009;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);outline:none;
  animation:cafePopoverIn .18s ease-out both;
}
@keyframes cafePopoverIn{from{opacity:0;transform:var(--pop-transform) scale(.97)}to{opacity:1;transform:var(--pop-transform) scale(1)}}
.cafe-room-popover.p1{left:26%;top:42%;--pop-transform:translate(34px,-45%)}
.cafe-room-popover.p2{left:54%;top:38%;--pop-transform:translate(34px,-42%)}
.cafe-room-popover.p3{left:79%;top:46%;--pop-transform:translate(calc(-100% - 34px),-42%)}
.cafe-room-popover.p4{left:47%;top:65%;--pop-transform:translate(34px,-58%)}
.cafe-room-popover.p5{left:82%;top:62%;--pop-transform:translate(calc(-100% - 34px),-52%)}
.cafe-room-popover-close{
  position:absolute;right:9px;top:9px;width:29px;height:29px;border-radius:9px;border:1px solid #ffffff20;
  background:#ffffff0d;color:#fff;font-size:19px;line-height:1;cursor:pointer;display:grid;place-items:center;
}
.cafe-room-popover-close:hover{background:#ffffff1c}
.cafe-room-popover-kicker{font-size:7px;letter-spacing:.13em;font-weight:900;color:#efbd7c;margin:1px 34px 8px 0}
.cafe-room-popover-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.cafe-room-popover-head h3{font-size:14px;line-height:1.2;margin:0;color:#fff;max-width:170px}
.cafe-room-popover-head>span{font-size:6.5px;font-weight:850;padding:5px 7px;border-radius:999px;background:#ffffff12;color:#c7d4de;white-space:nowrap}
.cafe-room-popover-head>span.active{background:#4c231ed9;color:#ffae9d}.cafe-room-popover-head>span.waiting,.cafe-room-popover-head>span.open{background:#503c1ed9;color:#f4ca7b}
.cafe-room-popover>p{font-size:8px;line-height:1.45;color:#adbdc8;margin:7px 0 10px}.cafe-room-popover>p b{color:#eaf2f7}
.cafe-room-popover-meta{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}.cafe-room-popover-meta span{font-size:7px;padding:5px 7px;border-radius:999px;background:#ffffff0d;color:#c7d5de}
.cafe-room-popover-action{width:100%;border:0;border-radius:10px;background:linear-gradient(135deg,#197bd0,#0d5ca5);color:#fff;padding:9px 10px;font-size:9px;font-weight:850;cursor:pointer;box-shadow:0 6px 16px #00182d55}
.cafe-room-popover-action:disabled{background:#3a4854;color:#83919b;cursor:not-allowed;box-shadow:none}

/* The generic people/online drawer is moved away from the counter on desktop. */
@media (min-width:901px){
  .cafe-fs-info{left:15px!important;right:auto!important}
}

/* Ambient staff and background patrons. They are decorative only.
   Real table occupants are still generated by cafeFsPeople(). */
.cafe-scene-people{position:absolute;inset:64px 0 0;z-index:8;pointer-events:none;overflow:hidden}
.cafe-character{position:absolute;display:block;transform-origin:50% 100%;filter:drop-shadow(0 5px 6px #0006)}
.cafe-character .head{position:absolute;left:50%;top:0;transform:translateX(-50%);width:12px;height:13px;border-radius:48% 48% 46% 46%;background:#c9926f;border:1px solid #f3c9aa88;z-index:3}
.cafe-character .head::after{content:"";position:absolute;left:-1px;right:-1px;top:-2px;height:5px;border-radius:8px 8px 3px 3px;background:#2e251f}
.cafe-character .body{position:absolute;left:50%;top:11px;transform:translateX(-50%);width:19px;height:28px;border-radius:8px 8px 5px 5px;background:linear-gradient(180deg,#304e62,#172f42);border:1px solid #ffffff18;z-index:2}
.cafe-character .arm{position:absolute;top:16px;width:6px;height:22px;border-radius:7px;background:#c9926f;transform-origin:50% 2px;z-index:1}
.cafe-character .arm.a{left:1px;transform:rotate(15deg)}.cafe-character .arm.b{right:1px;transform:rotate(-15deg)}
.cafe-character.bartender{left:84.8%;top:21.5%;width:28px;height:48px;transform:scale(.88)}
.cafe-character.bartender .body{width:22px;height:29px;background:linear-gradient(180deg,#f0efe9,#bfc8ca)}
.cafe-character.bartender .apron{position:absolute;left:50%;top:20px;transform:translateX(-50%);width:17px;height:20px;border-radius:3px 3px 6px 6px;background:#2f4350;z-index:3}
.cafe-character.bartender .arm.a{animation:cafeBartenderArm 4.6s ease-in-out infinite}
@keyframes cafeBartenderArm{0%,68%,100%{transform:rotate(15deg)}76%,86%{transform:rotate(42deg)}}

.cafe-character.server{left:70.2%;top:39.5%;width:32px;height:68px;transform:scale(1.02)}
.cafe-character.server .head{width:13px;height:14px}.cafe-character.server .body{width:21px;height:34px;background:linear-gradient(180deg,#263e54,#15283a)}
.cafe-character.server .tray{position:absolute;right:-16px;top:18px;width:23px;height:4px;border-radius:50%;background:#8b5c3b;box-shadow:0 -2px 0 #d9a36a;z-index:4}
.cafe-character.server .arm.b{right:-1px;transform:rotate(-63deg);height:21px}
.cafe-character.server{animation:cafeServerIdle 5.4s ease-in-out infinite}
@keyframes cafeServerIdle{0%,100%{margin-left:0;transform:scale(1.02) translateY(0)}50%{margin-left:3px;transform:scale(1.02) translateY(-1px)}}

.cafe-character.patron{width:22px;height:39px;opacity:.93}
.cafe-character.patron .head{width:10px;height:11px}.cafe-character.patron .body{top:10px;width:18px;height:24px;border-radius:9px 9px 4px 4px}
.cafe-character.patron-window{left:56.2%;top:29.4%;transform:scale(.72) rotate(-2deg)}
.cafe-character.patron-window .body{background:linear-gradient(180deg,#6b5145,#3b2c26)}
.cafe-character.patron-sofa{left:18.3%;top:31.5%;transform:scale(.86) rotate(2deg)}
.cafe-character.patron-sofa .body{background:linear-gradient(180deg,#536447,#2d3b28)}
.cafe-character.patron .head{animation:cafePatronLook 5.8s ease-in-out infinite;transform-origin:50% 100%}
.cafe-character.patron-sofa .head{animation-delay:1.8s}
@keyframes cafePatronLook{0%,70%,100%{transform:translateX(-50%) rotate(0)}80%{transform:translateX(-50%) rotate(7deg)}90%{transform:translateX(-50%) rotate(-4deg)}}

@media(max-width:900px){
  .modal-backdrop.cafe-context{place-items:center!important;padding:70px 12px 80px!important;background:#04182b9c!important;backdrop-filter:blur(5px)!important}
  .modal-backdrop.cafe-context .modal-card{width:min(760px,96vw)!important;max-height:84vh!important}
  .cafe-scene-people{display:none!important}
  .cafe-room-popover,.cafe-room-popover.p1,.cafe-room-popover.p2,.cafe-room-popover.p3,.cafe-room-popover.p4,.cafe-room-popover.p5{
    position:fixed!important;left:10px!important;right:10px!important;top:auto!important;bottom:76px!important;width:auto!important;min-width:0!important;
    --pop-transform:translate(0,0)!important;transform:none!important;z-index:96!important;
  }
  .cafe-room-popover-head h3{max-width:none}
}

@media(prefers-reduced-motion:reduce){
  .cafe-room-popover,.cafe-character,.cafe-character .arm,.cafe-character .head{animation:none!important}
}
.cafe-fs-tables .cafe-room-popover{pointer-events:auto}


/* ============================================================
   UI20.9 — Visible Café character layer
   - Replaces tiny CSS-only figures with scalable SVG illustrations.
   - Staff/background patrons are always visible on desktop.
   - Live table occupants scale with scene depth and participant count.
   ============================================================ */
@media (min-width:901px){
  .cafe-scene-people{
    display:block!important;position:absolute!important;inset:64px 0 0!important;
    z-index:9!important;pointer-events:none!important;overflow:hidden!important;
  }
  .cafe-scene-person{
    position:absolute!important;display:block!important;width:auto!important;object-fit:contain!important;
    transform-origin:50% 100%!important;opacity:.99!important;
    filter:drop-shadow(0 8px 7px rgba(0,0,0,.34))!important;
    user-select:none!important;-webkit-user-drag:none!important;
  }
  /* Counter staff: scale intentionally much larger than UI20.8. */
  .cafe-scene-person.bartender{
    left:84.8%!important;top:18.5%!important;height:clamp(112px,16.5vh,166px)!important;
    transform:translateX(-50%)!important;
    animation:cafeBartenderVisible 5.6s ease-in-out infinite!important;
  }
  .cafe-scene-person.server{
    left:67.2%!important;top:37.5%!important;height:clamp(145px,20vh,205px)!important;
    transform:translateX(-50%)!important;
    animation:cafeServerVisible 6.4s ease-in-out infinite!important;
  }
  .cafe-scene-person.patron-window{
    left:53.0%!important;top:27.6%!important;height:clamp(78px,10.5vh,112px)!important;
    transform:translateX(-50%) rotate(-1deg)!important;
    animation:cafePatronVisible 7s ease-in-out infinite!important;
  }
  .cafe-scene-person.patron-sofa{
    left:17.2%!important;top:29.0%!important;height:clamp(100px,14vh,138px)!important;
    transform:translateX(-50%) rotate(1deg)!important;
    animation:cafePatronVisible 7.6s 1.3s ease-in-out infinite!important;
  }
  @keyframes cafeBartenderVisible{
    0%,68%,100%{transform:translateX(-50%) translateY(0) rotate(0deg)}
    78%,88%{transform:translateX(-50%) translateY(-2px) rotate(1.4deg)}
  }
  @keyframes cafeServerVisible{
    0%,100%{transform:translateX(-50%) translate(0,0)}
    50%{transform:translateX(-50%) translate(5px,-2px)}
  }
  @keyframes cafePatronVisible{
    0%,72%,100%{margin-top:0}
    82%{margin-top:-2px}
    91%{margin-top:1px}
  }

  /* Live occupants: use readable semi-flat SVG people instead of 15×23 px CSS dots. */
  .cafe-table-people{
    position:absolute!important;left:50%!important;top:50%!important;
    transform:translate(-50%,-50%)!important;pointer-events:none!important;z-index:2!important;
    filter:none!important;overflow:visible!important;
  }
  .cafe-fs-table.p1 .cafe-table-people{width:330px!important;height:160px!important;transform:translate(-50%,-50%) scale(.88)!important}
  .cafe-fs-table.p2 .cafe-table-people{width:250px!important;height:125px!important;transform:translate(-50%,-50%) scale(.72)!important}
  .cafe-fs-table.p3 .cafe-table-people{width:300px!important;height:150px!important;transform:translate(-50%,-50%) scale(.82)!important}
  .cafe-fs-table.p4 .cafe-table-people{width:390px!important;height:205px!important;transform:translate(-50%,-50%) scale(1.02)!important}
  .cafe-fs-table.p5 .cafe-table-people{width:380px!important;height:200px!important;transform:translate(-50%,-50%) scale(1)!important}
  .cafe-seat-person{
    position:absolute!important;display:block!important;width:auto!important;height:clamp(72px,10vh,112px)!important;
    object-fit:contain!important;transform-origin:50% 100%!important;opacity:.98!important;
    filter:drop-shadow(0 6px 5px rgba(0,0,0,.34))!important;
  }
  .cafe-table-people .seat-1{left:2%!important;top:12%!important}
  .cafe-table-people .seat-2{right:2%!important;top:12%!important}
  .cafe-table-people .seat-3{left:25%!important;bottom:-28%!important}
  .cafe-table-people .seat-4{right:25%!important;bottom:-28%!important}
  .cafe-table-people.people-1 .seat-1{left:43%!important;top:auto!important;bottom:-25%!important}
  .cafe-table-people.people-2 .seat-1{left:4%!important;top:15%!important}
  .cafe-table-people.people-2 .seat-2{right:4%!important;top:15%!important}
  .cafe-table-people.people-3 .seat-1{left:3%!important;top:12%!important}
  .cafe-table-people.people-3 .seat-2{right:3%!important;top:12%!important}
  .cafe-table-people.people-3 .seat-3{left:43%!important;bottom:-25%!important}
  .cafe-fs-table.p2 .cafe-seat-person{height:82px!important}
  .cafe-fs-table.p1 .cafe-seat-person,.cafe-fs-table.p3 .cafe-seat-person{height:94px!important}
  .cafe-fs-table.p4 .cafe-seat-person,.cafe-fs-table.p5 .cafe-seat-person{height:116px!important}
  .cafe-fs-table.active .cafe-seat-person{animation:cafeSeatTalk 2.7s ease-in-out infinite!important}
  .cafe-fs-table.active .cafe-seat-person:nth-child(2){animation-delay:.35s!important}
  .cafe-fs-table.active .cafe-seat-person:nth-child(3){animation-delay:.7s!important}
  .cafe-fs-table.active .cafe-seat-person:nth-child(4){animation-delay:1.05s!important}
  @keyframes cafeSeatTalk{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2px) rotate(1.2deg)}}
  .cafe-people-extra{
    right:13%!important;bottom:-18%!important;height:22px!important;min-width:22px!important;padding:0 6px!important;
    font-size:9px!important;line-height:20px!important;z-index:5!important;
  }
  .cafe-table-pin{z-index:6!important}
  .cafe-pin-count,.cafe-pin-label{position:relative!important;z-index:7!important}
}

@media (max-width:900px){
  /* Mobile/tablet keeps the accessible room-list layout, so decorative figures do not compete with controls. */
  .cafe-scene-people,.cafe-table-people{display:none!important}
}

@media (prefers-reduced-motion:reduce){
  .cafe-scene-person,.cafe-seat-person{animation:none!important}
}

/* ============================================================
   UI21.0 — Panorama Café + photographic table overlays
   - Removes all illustrated/cartoon character layers.
   - Keeps cafe-hall-bg.jpg as the empty/no-person base scene.
   - Each physical table has two photographic overlay states:
     partial (some seats occupied) / full (busy or full).
   - Background and table anchors pan/zoom together on desktop.
   ============================================================ */
.cafe-scene-people,.cafe-table-people,.cafe-seat-person,.cafe-character{display:none!important}

@media (min-width:901px){
  .cafe-fs-hall{--cafe-scale:1;--cafe-x:0px;--cafe-y:0px;cursor:grab;touch-action:none}
  .cafe-fs-hall.is-panning{cursor:grabbing}
  .cafe-fs-hall .cafe-fs-bg,
  .cafe-fs-hall .cafe-fs-tables{
    transform:translate3d(var(--cafe-x),var(--cafe-y),0) scale(var(--cafe-scale))!important;
    transform-origin:50% 50%!important;
    transition:transform .18s ease-out!important;
    will-change:transform!important;
  }
  .cafe-fs-hall.is-panning .cafe-fs-bg,
  .cafe-fs-hall.is-panning .cafe-fs-tables{transition:none!important}

  /* Six real furniture anchors visible in the approved empty café photo. */
  .cafe-fs-table.p1{left:18%!important;top:67%!important}
  .cafe-fs-table.p2{left:26%!important;top:44%!important}
  .cafe-fs-table.p3{left:54%!important;top:39%!important}
  .cafe-fs-table.p4{left:79%!important;top:46%!important}
  .cafe-fs-table.p5{left:47%!important;top:69%!important}
  .cafe-fs-table.p6{left:82%!important;top:65%!important}

  /* Photographic people/table overlays. The soft alpha edges let the
     source photography blend into the warm café scene without hard cards. */
  .cafe-table-photo-wrap{
    position:absolute!important;left:50%!important;bottom:15px!important;z-index:1!important;
    transform:translateX(-50%)!important;pointer-events:none!important;display:block!important;
    opacity:.98!important;filter:saturate(.94) contrast(.98) brightness(.98) drop-shadow(0 8px 9px rgba(35,19,9,.18))!important;
  }
  .cafe-table-photo-overlay{display:block!important;width:100%!important;height:auto!important;max-width:none!important;user-select:none!important;-webkit-user-drag:none!important}
  .cafe-table-photo-wrap>b{display:none!important}
  .cafe-fs-table.p1 .cafe-table-photo-wrap{width:clamp(190px,17vw,300px)!important;bottom:10px!important}
  .cafe-fs-table.p2 .cafe-table-photo-wrap{width:clamp(170px,15vw,255px)!important;bottom:12px!important}
  .cafe-fs-table.p3 .cafe-table-photo-wrap{width:clamp(145px,12vw,210px)!important;bottom:13px!important}
  .cafe-fs-table.p4 .cafe-table-photo-wrap{width:clamp(155px,13vw,225px)!important;bottom:12px!important}
  .cafe-fs-table.p5 .cafe-table-photo-wrap{width:clamp(220px,19vw,335px)!important;bottom:6px!important}
  .cafe-fs-table.p6 .cafe-table-photo-wrap{width:clamp(210px,18vw,320px)!important;bottom:7px!important}
  .cafe-fs-table .cafe-table-pin,.cafe-fs-table .cafe-pin-count,.cafe-fs-table .cafe-pin-label{position:relative!important;z-index:7!important}

  /* The counter remains the only place that creates a room. */
  .cafe-fs-counter-marker{left:89%!important;top:34%!important;z-index:32!important}

  /* Smart popovers follow the six spatial anchors and never occupy the counter. */
  .cafe-room-popover.p1{left:18%!important;top:67%!important;--pop-transform:translate(34px,-62%)!important}
  .cafe-room-popover.p2{left:26%!important;top:44%!important;--pop-transform:translate(34px,-48%)!important}
  .cafe-room-popover.p3{left:54%!important;top:39%!important;--pop-transform:translate(34px,-44%)!important}
  .cafe-room-popover.p4{left:79%!important;top:46%!important;--pop-transform:translate(calc(-100% - 34px),-46%)!important}
  .cafe-room-popover.p5{left:47%!important;top:69%!important;--pop-transform:translate(34px,-64%)!important}
  .cafe-room-popover.p6{left:82%!important;top:65%!important;--pop-transform:translate(calc(-100% - 34px),-60%)!important}

  .cafe-view-controls{
    position:absolute;right:18px;bottom:20px;z-index:91;height:42px;display:flex;align-items:center;gap:4px;
    padding:4px;border:1px solid rgba(255,255,255,.34);border-radius:999px;background:rgba(10,24,37,.76);
    color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 8px 25px rgba(0,0,0,.28)
  }
  .cafe-view-controls button{height:32px;min-width:32px;padding:0 9px;border:0;border-radius:999px;background:rgba(255,255,255,.08);color:#fff;font:800 15px/1 Inter,system-ui;cursor:pointer}
  .cafe-view-controls button:hover{background:rgba(255,255,255,.18)}
  .cafe-view-controls>span{min-width:45px;text-align:center;font-size:10px;font-weight:800;color:#eaf3fa}
  .cafe-view-controls .center{display:flex;align-items:center;gap:6px;padding:0 12px;font-size:11px;font-weight:750}
  .cafe-view-controls .center span{white-space:nowrap}
  .cafe-fullscreen-btn{right:18px!important;bottom:72px!important}
}

@media (max-width:900px){
  .cafe-table-photo-wrap,.cafe-view-controls{display:none!important}
  .cafe-fs-bg,.cafe-fs-tables{transform:none!important}
  .cafe-fs-table.p6{position:relative!important;left:auto!important;top:auto!important;transform:none!important;width:100%!important;height:auto!important;display:grid!important;grid-template-columns:44px minmax(0,1fr)!important;align-items:center!important;background:rgba(255,255,255,.94)!important;border:1px solid #ffffffcc!important;border-radius:13px!important;padding:8px!important;box-shadow:0 8px 24px #0003!important}
}

@media (prefers-reduced-motion:reduce){
  .cafe-fs-hall .cafe-fs-bg,.cafe-fs-hall .cafe-fs-tables{transition:none!important}
}

/* ============================================================
   UI21.1 — Dynamic Café Atmosphere (NO PERSON OVERLAYS)
   - Removes all photographic/illustrated people overlays.
   - Uses three whole-scene atmosphere layers: empty / active / busy.
   - Exact room occupancy remains represented by table markers.
   - Table activity is shown only with subtle light, laptop and cup/steam cues.
   ============================================================ */
.cafe-table-photo-wrap,.cafe-table-photo-overlay,.cafe-table-people,.cafe-scene-people,.cafe-seat-person,.cafe-character{display:none!important}

.cafe-fs-bg{
  background-image:none!important;
  background:none!important;
  overflow:hidden!important;
}
.cafe-bg-layer{
  position:absolute;inset:0;display:block;
  background-position:center top;
  background-size:100% 100%;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity .72s ease;
  will-change:opacity;
}
.cafe-bg-empty{background-image:url('cafe-hall-empty.jpg')}
.cafe-bg-active{background-image:url('cafe-hall-active.jpg')}
.cafe-bg-busy{background-image:url('cafe-hall-busy.jpg')}
.cafe-fs-hall.atmosphere-empty .cafe-bg-empty,
.cafe-fs-hall.atmosphere-active .cafe-bg-active,
.cafe-fs-hall.atmosphere-busy .cafe-bg-busy{opacity:1}

/* Atmosphere intensity follows the overall Café occupancy. */
.cafe-fs-hall.atmosphere-empty .cafe-lamp-glows{opacity:.48!important}
.cafe-fs-hall.atmosphere-active .cafe-lamp-glows{opacity:.72!important}
.cafe-fs-hall.atmosphere-busy .cafe-lamp-glows{opacity:.9!important}
.cafe-fs-hall.atmosphere-empty .cafe-dust{opacity:.18!important}
.cafe-fs-hall.atmosphere-active .cafe-dust{opacity:.31!important}
.cafe-fs-hall.atmosphere-busy .cafe-dust{opacity:.42!important}
.cafe-fs-hall.atmosphere-busy::before{opacity:.82!important}

/* Table-level ambient cues: deliberately object-based, never people. */
.cafe-table-ambient{
  position:absolute;left:50%;top:50%;width:110px;height:70px;
  transform:translate(-50%,-48%);z-index:2;pointer-events:none;
  opacity:0;transition:opacity .35s ease,filter .35s ease;
}
.cafe-table-ambient i{position:absolute;display:block}
.cafe-table-ambient .ambient-light{
  left:50%;top:50%;width:105px;height:42px;transform:translate(-50%,-50%);
  border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,199,111,.30),rgba(255,167,69,.10) 48%,transparent 74%);
  filter:blur(5px);
}
.cafe-table-ambient .ambient-laptop{
  left:36px;top:22px;width:27px;height:17px;border-radius:3px 3px 1px 1px;
  background:linear-gradient(160deg,rgba(186,229,255,.92),rgba(63,133,182,.74));
  border:1px solid rgba(236,247,255,.65);box-shadow:0 0 10px rgba(118,201,255,.34);
  transform:perspective(60px) rotateX(-12deg) rotateZ(-3deg);
}
.cafe-table-ambient .ambient-laptop::after{
  content:"";position:absolute;left:-3px;right:-3px;bottom:-4px;height:3px;border-radius:1px;background:rgba(52,62,68,.72)
}
.cafe-table-ambient .ambient-cup{
  left:69px;top:31px;width:10px;height:8px;border-radius:2px 2px 4px 4px;
  background:#f2eee7;border:1px solid rgba(255,255,255,.72);box-shadow:0 2px 4px rgba(0,0,0,.22)
}
.cafe-table-ambient .ambient-cup::after{
  content:"";position:absolute;right:-5px;top:1px;width:5px;height:4px;border:1px solid rgba(242,238,231,.92);border-left:0;border-radius:0 5px 5px 0
}
.cafe-table-ambient .ambient-steam{
  left:71px;top:16px;width:8px;height:14px;border-left:1.5px solid rgba(255,255,255,.64);border-radius:50%;
  filter:blur(.2px);animation:cafeAmbientSteam 3.4s ease-in-out infinite
}
.cafe-table-ambient .ambient-steam::after{
  content:"";position:absolute;left:3px;top:2px;width:6px;height:10px;border-left:1px solid rgba(255,255,255,.42);border-radius:50%
}
@keyframes cafeAmbientSteam{
  0%,100%{transform:translateY(3px) translateX(0);opacity:.18}
  42%{transform:translateY(-3px) translateX(1px);opacity:.75}
  72%{transform:translateY(-7px) translateX(-1px);opacity:.12}
}
.cafe-fs-table.activity-live .cafe-table-ambient{opacity:.55}
.cafe-fs-table.activity-warm .cafe-table-ambient{opacity:.76;filter:saturate(1.04)}
.cafe-fs-table.activity-full .cafe-table-ambient{opacity:.94;filter:saturate(1.08) brightness(1.04)}
.cafe-fs-table.activity-idle .cafe-table-ambient{opacity:0!important}
.cafe-fs-table.activity-full .cafe-table-pin{box-shadow:0 5px 13px #0008,0 0 0 5px rgba(255,121,91,.13),0 0 18px rgba(255,118,83,.30)!important}

/* Perspective scale for ambient props on far/near tables. */
.cafe-fs-table.p2 .cafe-table-ambient,.cafe-fs-table.p3 .cafe-table-ambient{transform:translate(-50%,-48%) scale(.72)}
.cafe-fs-table.p1 .cafe-table-ambient,.cafe-fs-table.p4 .cafe-table-ambient{transform:translate(-50%,-48%) scale(.86)}
.cafe-fs-table.p5 .cafe-table-ambient,.cafe-fs-table.p6 .cafe-table-ambient{transform:translate(-50%,-48%) scale(1.05)}

/* Live board belongs to the counter, not the room popovers. */
.cafe-live-counter{
  position:absolute;right:34px;top:-8px;width:126px;padding:8px 9px;border-radius:11px;
  border:1px solid rgba(255,225,181,.25);background:rgba(41,27,20,.72);
  color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 8px 20px rgba(0,0,0,.28);pointer-events:none;text-align:left
}
.cafe-live-counter small{display:block;font-size:6px;letter-spacing:.12em;color:#efbd7c;font-weight:900}
.cafe-live-counter b{display:block;margin-top:3px;font-size:9px;line-height:1.15}
.cafe-live-counter span{display:block;margin-top:2px;font-size:6.5px;color:#d8c8ba}

/* Whole-scene transition and pan/zoom stay synchronized. */
@media (min-width:901px){
  .cafe-fs-hall .cafe-fs-bg{background:none!important}
  .cafe-fs-counter-marker{z-index:34!important}
}
@media (max-width:900px){
  .cafe-bg-layer{background-size:100% 100%!important;background-position:center top!important}
  .cafe-table-ambient,.cafe-live-counter{display:none!important}
}
@media (prefers-reduced-motion:reduce){
  .cafe-bg-layer,.cafe-table-ambient{transition:none!important}
  .cafe-table-ambient .ambient-steam{animation:none!important}
}


/* ============================================================
   UI21.2 — Multi-Level Café Hall Backgrounds
   Five same-camera whole-scene images selected by real occupancy.
   L0 0–10%, L1 >10–30%, L2 >30–55%, L3 >55–80%, L4 >80%.
   JS adds ±3% hysteresis + 10 s stability before a level change.
   No person overlays are rendered by the application.
   ============================================================ */
.cafe-bg-l0{background-image:url('cafe/cafe-hall-l0.jpg?v=1.0.6')}
.cafe-bg-l1{background-image:url('cafe/cafe-hall-l1.jpg?v=1.0.6')}
.cafe-bg-l2{background-image:url('cafe/cafe-hall-l2.jpg?v=1.0.6')}
.cafe-bg-l3{background-image:url('cafe/cafe-hall-l3.jpg?v=1.0.6')}
.cafe-bg-l4{background-image:url('cafe/cafe-hall-l4.jpg?v=1.0.6')}
.cafe-fs-hall.hall-l0 .cafe-bg-l0,
.cafe-fs-hall.hall-l1 .cafe-bg-l1,
.cafe-fs-hall.hall-l2 .cafe-bg-l2,
.cafe-fs-hall.hall-l3 .cafe-bg-l3,
.cafe-fs-hall.hall-l4 .cafe-bg-l4{opacity:1!important}
.cafe-fs-hall.hall-l0 .cafe-lamp-glows{opacity:.46!important}
.cafe-fs-hall.hall-l1 .cafe-lamp-glows{opacity:.56!important}
.cafe-fs-hall.hall-l2 .cafe-lamp-glows{opacity:.68!important}
.cafe-fs-hall.hall-l3 .cafe-lamp-glows{opacity:.80!important}
.cafe-fs-hall.hall-l4 .cafe-lamp-glows{opacity:.90!important}
.cafe-fs-hall.hall-l0 .cafe-dust{opacity:.16!important}
.cafe-fs-hall.hall-l1 .cafe-dust{opacity:.22!important}
.cafe-fs-hall.hall-l2 .cafe-dust{opacity:.28!important}
.cafe-fs-hall.hall-l3 .cafe-dust{opacity:.35!important}
.cafe-fs-hall.hall-l4 .cafe-dust{opacity:.42!important}

/* UI21.4 — Single Active Table per User */
.cafe-active-table-bar{position:absolute;z-index:49;top:72px;left:50%;transform:translateX(-50%);min-width:min(680px,calc(100% - 40px));max-width:900px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:10px 12px 10px 16px;border:1px solid rgba(255,255,255,.17);border-radius:16px;background:rgba(8,20,35,.88);box-shadow:0 12px 32px rgba(0,0,0,.24);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:#fff}
.cafe-active-table-bar>span{display:grid;grid-template-columns:10px auto auto 1fr;align-items:center;gap:4px 9px;min-width:0}.cafe-active-table-bar>span>i{grid-row:1/3;width:8px;height:8px;border-radius:50%;background:#36d47a;box-shadow:0 0 0 5px rgba(54,212,122,.13)}.cafe-active-table-bar small{font-size:8px;letter-spacing:.12em;color:#9fc4e9}.cafe-active-table-bar b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cafe-active-table-bar em{font-style:normal;font-size:10px;color:#c7d5e4;white-space:nowrap}.cafe-active-table-bar>div{display:flex;gap:7px;flex:0 0 auto}.cafe-active-table-bar button{height:34px;border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:0 12px;background:#1f6feb;color:#fff;font-weight:700;cursor:pointer}.cafe-active-table-bar button.leave{background:rgba(255,255,255,.06);color:#ffe0e0;border-color:rgba(255,120,120,.3)}
.single-table-guard{max-width:560px}.single-table-guard h2{margin:7px 0 10px}.single-table-guard p{line-height:1.6}.single-table-guard-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.single-table-guard-actions button{min-height:42px}
.cafe-room-popover-action:disabled{opacity:.55;cursor:not-allowed}
@media(max-width:900px){.cafe-active-table-bar{top:64px;left:8px;right:8px;transform:none;min-width:0;max-width:none;padding:8px 9px 8px 12px;border-radius:13px;gap:8px}.cafe-active-table-bar>span{grid-template-columns:8px minmax(0,1fr);gap:2px 8px}.cafe-active-table-bar>span>i{grid-row:1/4}.cafe-active-table-bar small{font-size:7px}.cafe-active-table-bar b{font-size:11px}.cafe-active-table-bar em{font-size:8px}.cafe-active-table-bar>div{gap:4px}.cafe-active-table-bar button{height:31px;padding:0 8px;font-size:9px}.cafe-active-table-bar button.leave{display:none}}

/* ============================================================
   VEC1.0.0 — AI Coach API
   Private, on-demand text coaching. No microphone monitoring.
   ============================================================ */
.workspace-guide-rail .conversation-guide{position:relative;top:auto;max-height:none;margin-top:12px}
.ai-coach-panel{position:sticky;top:88px;z-index:3;background:linear-gradient(145deg,#f7fbff,#fffaf0);border:1px solid #d6e7f3;border-radius:18px;padding:14px;box-shadow:0 10px 28px rgba(20,62,98,.10)}
.ai-coach-panel.standalone{position:relative;top:auto;margin-top:18px;box-shadow:none;background:linear-gradient(145deg,#f5faff,#fffaf0)}
.ai-coach-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}.ai-coach-head>div span,.ai-coach-head>div b{display:block}.ai-coach-head>div span{font-size:8px;letter-spacing:.13em;font-weight:900;color:#1b75c7}.ai-coach-head>div b{font-size:14px;color:#173d60;margin-top:3px}.ai-coach-head small{font-size:7.5px;line-height:1.3;color:#667f94;background:#fff;border:1px solid #dce8f1;border-radius:999px;padding:5px 7px;white-space:nowrap}
.ai-coach-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:9px}.ai-coach-actions button{border:1px solid #d7e6f2;background:#fff;color:#315e80;border-radius:9px;padding:7px 6px;font-size:8.5px;font-weight:800;cursor:pointer;transition:.15s}.ai-coach-actions button:hover:not(:disabled){background:#eef7ff;border-color:#9fcbea;color:#0d6eb9}.ai-coach-actions button:disabled{opacity:.45;cursor:not-allowed}
.ai-coach-panel textarea{width:100%;resize:vertical;min-height:64px;max-height:150px;border:1px solid #d9e6ef;border-radius:10px;background:#fff;padding:9px 10px;outline:0;color:#294d68;font-size:9.5px;line-height:1.45}.ai-coach-panel textarea:focus{border-color:#8cc3e9;box-shadow:0 0 0 3px rgba(31,134,205,.08)}
.ai-coach-output{margin-top:9px;min-height:62px;max-height:240px;overflow:auto;border:1px solid #e0eaf2;background:rgba(255,255,255,.86);border-radius:11px;padding:10px;color:#365b75;font-size:9.5px;line-height:1.55;white-space:normal}.ai-coach-output.muted{color:#8497a7}.ai-coach-output.loading{position:relative;color:#6d8295}.ai-coach-output.loading:before{content:"";display:inline-block;width:8px;height:8px;border:2px solid #b7d6eb;border-top-color:#1777c7;border-radius:50%;margin-right:7px;vertical-align:-1px;animation:aiCoachSpin .7s linear infinite}@keyframes aiCoachSpin{to{transform:rotate(360deg)}}
.ai-coach-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}.ai-coach-footer>span{font-size:7.5px;color:#8a9aa8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ai-coach-footer button{padding:7px 9px;font-size:8px}.ai-coach-footer button[hidden]{display:none!important}
.ai-standalone{max-width:720px}.ai-standalone>h2{font-size:25px;color:#173a5d;margin:6px 0}.ai-standalone>p{color:#71869a;font-size:11px;line-height:1.55;margin:0}.ai-standalone .ai-coach-actions{grid-template-columns:repeat(3,minmax(0,1fr))}.ai-standalone .ai-coach-output{min-height:100px;max-height:300px;font-size:10.5px}
.workspace-guide-mobile>.ai-coach-panel{display:none}
@media(max-width:1200px){.workspace-guide-mobile>.ai-coach-panel{display:block;position:relative;top:auto;margin-bottom:10px}.workspace-guide-mobile .ai-coach-actions{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:650px){.ai-standalone .ai-coach-actions,.workspace-guide-mobile .ai-coach-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.ai-coach-head{flex-direction:column}.ai-coach-head small{align-self:flex-start}}


/* ============================================================
   VEC1.0.0 — Groq Free AI Coach + Push-to-Talk
   Microphone is activated only by explicit user action.
   ============================================================ */
.ai-voice-box{display:flex;align-items:center;gap:10px;margin:0 0 10px;padding:9px;border:1px solid #cfe2f0;border-radius:12px;background:linear-gradient(135deg,#edf8ff,#fff7e9)}
.ai-voice-box>div{min-width:0;display:flex;flex-direction:column;gap:3px}.ai-voice-box small{font-size:7.5px;font-weight:800;color:#245f8f}.ai-voice-box span{font-size:7.5px;color:#7890a2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-ptt{display:flex;align-items:center;gap:7px;min-width:158px;border:0;border-radius:10px;padding:9px 10px;background:#145fb7;color:#fff;cursor:pointer;box-shadow:0 7px 16px rgba(20,95,183,.18)}.ai-ptt>span{font-size:15px;color:#fff}.ai-ptt>b{font-size:8.5px;line-height:1.15;text-align:left}.ai-ptt:hover{background:#0d70d2}.ai-ptt.recording{background:#d84444;animation:aiPttPulse 1.15s ease-in-out infinite}.ai-ptt.recording>span{animation:aiPttMic .65s ease-in-out infinite alternate}@keyframes aiPttPulse{50%{box-shadow:0 0 0 7px rgba(216,68,68,.11)}}@keyframes aiPttMic{to{transform:scale(1.13)}}
@media(max-width:650px){.ai-voice-box{align-items:stretch;flex-direction:column}.ai-ptt{width:100%;justify-content:center}.ai-voice-box>div{text-align:center}}


/* ============================================================
   VEC1.0.4 — Conversation-first workspace + mobile PWA shell
   No database migration required.
   ============================================================ */
.workspace-ai-support{min-width:0}
.workspace-ai-support .ai-coach-panel{position:relative!important;top:auto!important;margin:0;box-shadow:0 8px 24px #153f6510;background:linear-gradient(145deg,#f7fbff,#fffaf0)}
.workspace-ai-support .ai-coach-actions{grid-template-columns:repeat(3,minmax(0,1fr))}
.ai-coach-head>div em{display:block;margin-top:4px;font-size:8px;font-style:normal;color:#72879a;font-weight:650}
.workspace-guide-rail>.ai-coach-panel{display:none!important}
.workspace-guide-rail .conversation-guide{top:88px}
.workspace-guide-mobile>.ai-coach-panel{display:none!important}
.workspace-stage{align-content:start}
.workspace-chat{display:none!important}

/* Mobile app navigation: desktop/tablet sidebar unchanged; phone becomes an off-canvas menu. */
.mobile-bottom-nav,.mobile-nav-scrim,.sidebar-close{display:none}
.install-app[hidden]{display:none!important}
.install-app.ready{background:#ffffff12!important}
@media(max-width:680px){
  body{padding-bottom:calc(68px + env(safe-area-inset-bottom));overflow-x:hidden}
  body.mobile-menu-open{overflow:hidden}
  .app{min-height:100svh}
  .sidebar{
    display:flex!important;position:fixed!important;z-index:120!important;left:0!important;top:0!important;bottom:0!important;
    width:min(82vw,320px)!important;height:100svh!important;padding:18px 14px calc(22px + env(safe-area-inset-bottom))!important;
    transform:translateX(-104%);transition:transform .22s ease;overflow:auto;box-shadow:20px 0 48px #00172f55
  }
  .sidebar.mobile-open{transform:translateX(0)}
  .sidebar .brand{padding-top:5px!important}
  .sidebar .brand-logo{width:60px!important;height:60px!important;flex-basis:60px!important}
  .sidebar .brand-copy{display:block!important}
  .sidebar nav{display:flex!important;grid-template-columns:none!important;flex-direction:column!important}
  .sidebar hr,.sidebar label{display:block!important}
  .sidebar .motto{display:block!important}
  .sidebar-close{display:grid;place-items:center;position:absolute;right:10px;top:10px;width:34px;height:34px;border:1px solid #ffffff25;background:#ffffff12;color:#fff;border-radius:11px;font-size:22px;z-index:3}
  .mobile-nav-scrim{display:block;position:fixed;z-index:110;inset:0;background:#06182d80;backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:.2s}
  .mobile-nav-scrim.open{opacity:1;pointer-events:auto}
  .mobile-bottom-nav{
    display:grid;grid-template-columns:repeat(5,1fr);position:fixed;z-index:100;left:8px;right:8px;bottom:calc(7px + env(safe-area-inset-bottom));
    height:58px;padding:4px 5px;background:rgba(8,38,70,.94);border:1px solid #ffffff1f;border-radius:18px;box-shadow:0 14px 36px #061b3455;
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)
  }
  .mobile-bottom-nav button{border:0;background:transparent;color:#b8cce0;border-radius:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:8px;font-weight:750;min-width:0}
  .mobile-bottom-nav button i{display:grid;place-items:center;width:23px;height:23px;font-style:normal}
  .mobile-bottom-nav .svg-icon{width:20px;height:20px}
  .mobile-bottom-nav button.active{background:#ffffff12;color:#fff}
  .topbar{left:0;right:0;z-index:40}
  .topbar .search input{font-size:12px}
  #content{padding:13px 12px 20px}
  .hero{height:230px;padding:24px 22px;border-radius:16px}
  .hero h1{font-size:30px}
  .module{aspect-ratio:auto!important;min-height:0!important}
  .module img{aspect-ratio:16/9;height:auto!important;min-height:0!important}
  .conversation-workspace{min-height:auto}
  .workspace-ai-support .ai-coach-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .workspace-guide-mobile{margin-top:0}
  .workspace-guide-mobile details{border-radius:14px}
}
@media(min-width:681px) and (max-width:1050px){
  .sidebar-close{display:none!important}
}
@media(prefers-reduced-motion:reduce){.sidebar,.mobile-nav-scrim{transition:none!important}}

@media(max-width:680px){body.cafe-mode{padding-bottom:0}.app.cafe-fullscreen>.mobile-bottom-nav,.app.cafe-fullscreen>.mobile-nav-scrim{display:none!important}}


/* VEC1.0.4 — Mobile Café practice modes + resilient AI voice */
.cafe-mobile-tabs{display:none}
.cafe-mobile-ai-panel{display:none}
.cafe-ai-help{display:block;margin-top:4px;color:#7b8fa1;font-size:9px;line-height:1.45}
.cafe-mobile-ai-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cafe-mobile-ai-topic{border:1px solid #dbe8f2;background:linear-gradient(145deg,#f7fbff,#fff9ec);border-radius:14px;padding:12px;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;color:#173d60}
.cafe-mobile-ai-topic span{min-width:0}.cafe-mobile-ai-topic b,.cafe-mobile-ai-topic small{display:block}.cafe-mobile-ai-topic b{font-size:12px;margin-bottom:4px}.cafe-mobile-ai-topic small{font-size:8px;color:#7d91a3}.cafe-mobile-ai-topic em{font-size:8px;font-style:normal;font-weight:800;color:#b66c11;white-space:nowrap}
.cafe-mobile-empty{border:1px dashed #d7e5ef;border-radius:14px;background:#f8fbfd;color:#758b9d;padding:16px;font-size:10px;line-height:1.5}
.ai-playback-fallback{margin:8px 0 0;padding:9px;border:1px solid #cfe2f0;border-radius:11px;background:#f5fbff;display:flex;align-items:center;gap:10px}
.ai-playback-fallback button{border:0;border-radius:9px;background:#166fc4;color:#fff;padding:8px 11px;font-size:8.5px;font-weight:850;cursor:pointer;white-space:nowrap}
.ai-playback-fallback small{font-size:7.5px;color:#73899b;line-height:1.4}
@media(max-width:700px){
  .cafe-mobile-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 0 14px;padding:4px;background:#edf4f8;border:1px solid #dce7ef;border-radius:12px;position:sticky;top:58px;z-index:5}
  .cafe-mobile-tabs button{border:0;background:transparent;color:#658097;border-radius:9px;padding:9px 5px;font-size:9px;font-weight:800;cursor:pointer}
  .cafe-mobile-tabs button.active{background:#fff;color:#0c6fbe;box-shadow:0 3px 10px #183e6412}
  .cafe-mobile-panel,.cafe-mobile-ai-panel{display:none!important}
  .cafe-mobile-panel.mobile-panel-active,.cafe-mobile-ai-panel.mobile-panel-active{display:block!important}
  .cafe-mobile-ai-list{grid-template-columns:1fr}
  .cafe-mobile-ai-topic{padding:12px}
  .cafe-mobile-ai-topic em{white-space:normal;text-align:right}
  .ai-playback-fallback{align-items:stretch;flex-direction:column}
  .ai-playback-fallback button{width:100%}
}

/* VEC1.0.4 — Full-screen Café mobile discoverability */
.ai-topic-picker>h2{font-size:24px;color:#173a5d;margin:6px 0}.ai-topic-picker>p{color:#71869a;font-size:11px;line-height:1.55;margin:0 0 14px}.ai-topic-picker-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.ai-topic-picker-grid button{border:1px solid #d7e6f2;background:linear-gradient(145deg,#f7fbff,#fff9ed);border-radius:14px;padding:13px;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:10px;color:#173d60;cursor:pointer}.ai-topic-picker-grid button:disabled{opacity:.5;cursor:not-allowed}.ai-topic-picker-grid b,.ai-topic-picker-grid small{display:block}.ai-topic-picker-grid b{font-size:12px;margin-bottom:4px}.ai-topic-picker-grid small{font-size:8px;color:#7c91a4}.ai-topic-picker-grid em{font-size:8px;font-style:normal;font-weight:800;color:#b76c10;white-space:nowrap}.ai-topic-picker-note{margin-top:12px;padding:10px;border-radius:10px;background:#fff4e5;color:#9c6116;font-size:9px}
@media(max-width:900px){
  .cafe-fs-dock{height:68px;align-items:stretch;padding:4px 3px}
  .cafe-fs-dock button{min-width:0;flex:1;flex-direction:column;gap:2px;padding:4px 2px;font-size:8px;line-height:1.05}
  .cafe-fs-dock button .svg-icon,.cafe-fs-dock button .hall-svg{width:17px;height:17px}
  .cafe-fs-dock button span{display:block!important;font-size:7px;max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cafe-fs-dock button b{font-size:7px}
  .cafe-fs-tables{inset:58px 0 96px}
  .ai-topic-picker-grid{grid-template-columns:1fr}
  .ai-topic-picker-grid button{padding:12px}
}
.create-room-type{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0 10px}.create-room-type button{border:1px solid #d9e6ef;background:#fff;border-radius:12px;padding:11px;text-align:left;color:#325a76;cursor:pointer}.create-room-type button b,.create-room-type button small{display:block}.create-room-type button b{font-size:11px}.create-room-type button small{font-size:8px;color:#8396a6;margin-top:4px;line-height:1.35}.create-room-type button.active{border-color:#5ba7df;background:#eef8ff;box-shadow:0 0 0 2px #d9f0ff inset}.create-room-type button.active b{color:#0f6fb6}@media(max-width:650px){.create-room-type{grid-template-columns:1fr}.create-room-type button{padding:10px 11px}}

/* VEC1.0.4 — Mobile home cards: image-first compact 2-column layout */
@media(max-width:680px){
  .hero{height:190px!important;padding:20px 18px!important;border-radius:15px!important;background-position:center!important}
  .hero h1{font-size:27px!important;line-height:.98!important;margin-bottom:10px!important}
  .hero p{font-size:14px!important;line-height:1.35!important;margin:0!important}
  .hero blockquote{font-size:12px!important;line-height:1.35!important;margin:14px 0 0!important}

  .module-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    margin-top:12px!important;
    align-items:stretch!important;
  }
  .module{
    position:relative!important;
    display:block!important;
    aspect-ratio:1.30 / 1!important;
    min-height:0!important;
    overflow:hidden!important;
    border-radius:14px!important;
    border:1px solid #dce8f2!important;
    box-shadow:0 6px 15px #193f6515!important;
    background:#173d60!important;
    transform:none!important;
  }
  .module:hover{transform:none!important;box-shadow:0 6px 15px #193f6515!important}
  .module img{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    aspect-ratio:auto!important;
    object-fit:cover!important;
    z-index:0!important;
  }
  .module::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:linear-gradient(180deg,transparent 38%,rgba(5,24,45,.16) 58%,rgba(5,24,45,.90) 100%);
  }
  .module>div{
    position:absolute!important;
    left:0!important;right:0!important;bottom:0!important;
    z-index:2!important;
    min-height:0!important;
    padding:28px 10px 10px!important;
    display:block!important;
    background:transparent!important;
  }
  .module i,.module small,.module button{display:none!important}
  .module span{display:block!important;min-width:0!important}
  .module b{
    display:-webkit-box!important;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
    color:#fff!important;
    font-size:13px!important;
    line-height:1.18!important;
    font-weight:800!important;
    letter-spacing:-.01em!important;
    text-shadow:0 2px 7px rgba(0,0,0,.40);
  }

  .section-head{margin-top:17px!important;margin-bottom:8px!important}
  .section-head h2{font-size:16px!important;margin:0!important}
  .section-head a{font-size:10px!important}
  .recent{
    display:flex!important;
    grid-template-columns:none!important;
    gap:9px!important;
    overflow-x:auto!important;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    padding:1px 1px 5px!important;
    margin-right:-12px!important;
  }
  .recent::-webkit-scrollbar{display:none}
  .recent>div{
    flex:0 0 min(72vw,230px)!important;
    min-height:64px!important;
    scroll-snap-align:start;
    padding:10px 11px!important;
    border-radius:13px!important;
    align-items:center!important;
    line-height:1.35!important;
  }
  .recent-icon{width:32px!important;height:32px!important;flex-basis:32px!important}
}

@media(max-width:360px){
  .module-grid{gap:8px!important}
  .module{aspect-ratio:1.22 / 1!important}
  .module>div{padding:25px 8px 8px!important}
  .module b{font-size:12px!important}
}


/* ============================================================
   VEC1.0.4 — Mobile UI controls standardization
   ============================================================ */
:root{--vec-control-h:44px;--vec-control-radius:11px;--vec-control-font:14px;--vec-close-size:36px}
.modal-close,.cafe-drawer-close,.cafe-room-popover-close,.cafe-menu-top>button,.sidebar-close{
  width:var(--vec-close-size)!important;height:var(--vec-close-size)!important;min-width:var(--vec-close-size)!important;min-height:var(--vec-close-size)!important;
  padding:0!important;display:grid!important;place-items:center!important;line-height:0!important;font-size:0!important;overflow:hidden
}
.modal-close .svg-icon,.cafe-drawer-close .svg-icon,.cafe-room-popover-close .svg-icon,.cafe-menu-top>button .svg-icon,.sidebar-close .svg-icon{
  width:18px!important;height:18px!important;display:grid!important;place-items:center!important;line-height:0!important
}
.modal-close svg,.cafe-drawer-close svg,.cafe-room-popover-close svg,.cafe-menu-top>button svg,.sidebar-close svg{
  width:18px!important;height:18px!important;display:block!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important;stroke-linecap:round!important
}
.field input:not([type="checkbox"]):not([type="radio"]),.field select,.manage-inline select,.login-card input[type="text"],.login-card input[type="password"],.login-card input[type="email"]{
  box-sizing:border-box!important;width:100%;height:var(--vec-control-h)!important;min-height:var(--vec-control-h)!important;padding:0 12px!important;
  border:1px solid #d7e4ee!important;border-radius:var(--vec-control-radius)!important;background:#fff;color:#294d68;font-size:var(--vec-control-font)!important;line-height:1.2!important;outline:none
}
.field input:focus,.field select:focus,.manage-inline select:focus,.login-card input:focus{border-color:#79b5df!important;box-shadow:0 0 0 3px rgba(31,134,205,.09)!important}
.field select,.manage-inline select{-webkit-appearance:none;appearance:none;padding-right:36px!important;background-color:#fff!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23677f94' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 9 5 5 5-5'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 11px center!important;background-size:14px!important}
.ai-coach-panel textarea{min-height:88px!important;padding:11px 12px!important;border-radius:var(--vec-control-radius)!important;font-size:13px!important}
.topic-search{height:var(--vec-control-h)!important;min-height:var(--vec-control-h)!important;border-radius:var(--vec-control-radius)!important;padding:0 12px!important}
.topic-search input{height:100%!important;font-size:13px!important;line-height:1.2!important}
@media(max-width:900px){
  .cafe-fs-dock{height:72px!important;min-height:72px!important;padding:5px 4px!important;gap:2px!important;align-items:stretch!important}
  .cafe-fs-dock button{position:relative!important;height:62px!important;min-height:62px!important;min-width:0!important;padding:5px 2px 4px!important;display:flex!important;flex:1 1 0!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;overflow:visible!important}
  .cafe-fs-dock button .svg-icon,.cafe-fs-dock button .hall-svg{width:18px!important;height:18px!important;flex:0 0 18px!important}
  .cafe-fs-dock button span{display:block!important;width:100%!important;max-width:none!important;min-height:17px!important;padding:0 1px!important;overflow:visible!important;text-overflow:clip!important;white-space:normal!important;word-break:normal!important;text-align:center!important;font-size:8px!important;font-weight:800!important;line-height:1.05!important}
  .cafe-fs-dock button>b{position:absolute!important;top:2px!important;right:5px!important;min-width:17px!important;height:17px!important;padding:0 4px!important;font-size:7px!important;line-height:17px!important;z-index:2!important}
  .cafe-fs-tables{inset:58px 0 100px!important}
  .field input:not([type="checkbox"]):not([type="radio"]),.field select,.manage-inline select,.topic-search{height:44px!important;min-height:44px!important}
  .secondary,.primary,.danger,.danger-soft,.create-table{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}
@media(max-width:420px){.cafe-fs-dock button span{font-size:7.5px!important}.cafe-fs-dock button>b{right:3px!important}}
@media(max-width:760px){
  .cafe-quickbar button{height:auto!important;min-height:52px!important;padding:8px 7px!important;white-space:normal!important;line-height:1.15!important;text-align:center!important}
  .cafe-quickbar button span{min-width:0!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
  .cafe-mobile-tabs button{min-height:42px;line-height:1.15;white-space:normal}
}

/* VEC1.0.5 — Structured Fire & Rescue English lessons */
.fire-title{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}.fire-path-hint{padding:9px 13px;border-radius:999px;background:#eef6ff;color:#24557f;font-weight:800;font-size:12px;white-space:nowrap}.fire-lesson-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.fire-lesson-card{background:#fff;border:1px solid #dfe9f1;border-radius:18px;overflow:hidden;box-shadow:0 7px 24px rgba(12,40,70,.07);cursor:pointer;transition:.18s ease}.fire-lesson-card:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(12,40,70,.12)}.fire-lesson-cover{aspect-ratio:16/8.3;background-size:cover;background-position:center;display:flex;align-items:flex-start;justify-content:space-between;padding:12px}.fire-lesson-cover span,.fire-lesson-cover b{background:rgba(7,30,55,.78);color:#fff;padding:5px 8px;border-radius:8px;font-size:11px}.fire-lesson-body{padding:15px}.fire-lesson-body h3{margin:0 0 6px;font-size:18px;color:#102d4a}.fire-lesson-body p{margin:0 0 11px;color:#63788b;min-height:40px}.fire-meta{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:11px;color:#6a7f90}.fire-progress{height:7px;background:#eaf0f5;border-radius:999px;overflow:hidden;margin:12px 0 5px}.fire-progress i{display:block;height:100%;background:linear-gradient(90deg,#1d63dc,#25a0ff);border-radius:inherit}.fire-lesson-body small{font-size:11px;color:#73889a}.fire-lesson-body button{display:block;width:100%;margin-top:12px;border:0;border-radius:10px;min-height:40px;background:#102f55;color:#fff;font-weight:800}.back-link{border:0;background:transparent;color:#275b91;font-weight:800;padding:5px 0;margin-bottom:12px;cursor:pointer}.fire-lesson-head{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;background:linear-gradient(135deg,#0d2f54,#164879);color:#fff;border-radius:20px;padding:24px 26px}.fire-lesson-head h1{margin:5px 0 7px;font-size:31px}.fire-lesson-head p{margin:0;color:#d9e7f5}.fire-lesson-head .eyebrow{color:#9fcef8}.fire-head-meta{display:flex;gap:9px;flex-wrap:wrap}.fire-head-meta span{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.17);border-radius:9px;padding:8px 10px;white-space:nowrap}.fire-tabs{display:flex;gap:4px;overflow-x:auto;padding:12px 2px 2px;scrollbar-width:none}.fire-tabs::-webkit-scrollbar{display:none}.fire-tabs button{border:0;background:#edf3f8;color:#536b7f;border-radius:10px;padding:10px 15px;font-weight:800;white-space:nowrap;cursor:pointer}.fire-tabs button.active{background:#1769db;color:#fff}.fire-reading-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(320px,.8fr);gap:18px;margin-top:16px}.fire-reading,.fire-quiz,.exercise-block,.fire-section-intro{background:#fff;border:1px solid #dfe8f0;border-radius:16px;padding:20px}.fire-reading h2,.fire-section-intro h2{color:#102e4d;margin-top:0}.fire-objectives{background:#edf6ff;border-left:4px solid #3489ee;border-radius:10px;padding:12px 14px;margin-bottom:18px}.fire-objectives p{margin:5px 0 0}.reading-content{font-size:15px;line-height:1.75;color:#263b4e}.reading-content p{margin:0 0 14px}.fire-quiz{align-self:start;position:sticky;top:18px}.fire-quiz h3{margin-top:0}.fire-question{border:0;padding:12px 0;margin:0;border-top:1px solid #edf1f5}.fire-question legend{font-weight:750;line-height:1.4;padding:0}.fire-question label{display:flex;align-items:flex-start;gap:8px;margin-top:8px;cursor:pointer}.fire-question input{width:17px;height:17px;margin-top:2px}.fire-question.correct{background:#f1fbf6}.fire-question.wrong{background:#fff4f3}.fire-score{margin-top:12px;border-radius:10px;padding:10px 12px;display:flex;gap:10px;align-items:center}.fire-score.pass{background:#eaf9f0;color:#197548}.fire-score.retry{background:#fff1ef;color:#a84135}.fire-score b{font-size:21px}.fire-section-intro{margin-top:16px;margin-bottom:14px}.fire-section-intro p{margin-bottom:0;color:#657a8d}.vocab-study-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.vocab-study-card{display:grid;grid-template-columns:110px 1fr;gap:13px;background:#fff;border:1px solid #e0e9ef;border-radius:14px;overflow:hidden;min-height:120px}.vocab-study-card img{width:110px;height:100%;object-fit:contain;background:#f7fafc}.vocab-study-card>div{padding:12px 12px 12px 0}.vocab-study-card h3{margin:0;color:#173b5d}.vocab-study-card .ipa{font-size:12px;color:#2a70ba}.vocab-study-card p{margin:7px 0 0}.vocab-study-card small{display:block;color:#718496;margin-top:5px}.fire-complete-row{margin:16px 0 4px;display:flex;gap:12px;align-items:center}.fire-complete-row .primary,.fire-quiz .primary{border:0;border-radius:10px;background:#1769db;color:#fff;min-height:42px;padding:0 16px;font-weight:800;cursor:pointer}.exercise-block{margin-bottom:13px}.exercise-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:13px}.exercise-head>span{display:grid;place-items:center;min-width:30px;height:30px;border-radius:9px;background:#eaf3ff;color:#1769db;font-weight:900}.exercise-head h3{margin:2px 0 3px}.exercise-head p{margin:0;color:#65798c}.unscramble-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.unscramble-list label{display:grid;grid-template-columns:minmax(135px,.8fr) 1fr;align-items:center;gap:10px;background:#f7fafc;padding:9px 10px;border-radius:10px}.fire-practice-input{height:42px;border:1px solid #d5e1ea;border-radius:9px;background:#fff;padding:0 10px;font-size:14px;min-width:0}.answer-correct{border-color:#3bb273!important;background:#f2fbf6!important}.answer-wrong{border-color:#e56f62!important;background:#fff7f5!important}.picture-match-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}.picture-match-grid article{border:1px solid #e2e9ee;background:#fff;border-radius:12px;padding:9px}.picture-match-grid img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;background:#f7fafc;border-radius:8px;margin-bottom:8px}.picture-match-grid select{width:100%}.word-bank{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}.word-bank span{background:#e9f3ff;color:#265f98;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:750}.cloze-passage{line-height:2.45;background:#fbfcfd;border:1px solid #edf1f4;border-radius:12px;padding:15px}.inline-cloze{display:inline-block;width:auto;min-width:130px;height:34px;margin:0 3px}.linked-activities{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.linked-activities button{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;text-align:left;gap:3px 10px;border:1px solid #dbe6ee;background:#fff;border-radius:14px;padding:15px;cursor:pointer}.linked-activities button>span{grid-row:1/3;font-size:28px}.linked-activities button b{color:#153b60}.linked-activities button small{color:#6b8295}.empty.compact{margin-top:12px;padding:18px}.fire-path-hint,.fire-meta,.fire-head-meta,.fire-tabs,.fire-score,.linked-activities{box-sizing:border-box}
@media(max-width:1180px){.fire-lesson-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.vocab-study-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.fire-reading-layout{grid-template-columns:1fr}.fire-quiz{position:static}.picture-match-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:680px){.fire-title{align-items:flex-start}.fire-path-hint{display:none}.fire-lesson-grid{grid-template-columns:1fr;gap:12px}.fire-lesson-card{display:grid;grid-template-columns:112px 1fr}.fire-lesson-cover{aspect-ratio:auto;min-height:160px}.fire-lesson-cover span{font-size:9px}.fire-lesson-cover b{display:none}.fire-lesson-body{padding:12px}.fire-lesson-body p{min-height:0;font-size:12px}.fire-meta{display:none}.fire-lesson-head{padding:17px;display:block}.fire-lesson-head h1{font-size:25px}.fire-head-meta{margin-top:12px}.fire-tabs{margin:0 -2px}.fire-tabs button{padding:9px 12px}.fire-reading,.fire-quiz,.exercise-block,.fire-section-intro{padding:15px}.reading-content{font-size:14px}.vocab-study-grid{grid-template-columns:1fr}.vocab-study-card{grid-template-columns:92px 1fr}.vocab-study-card img{width:92px}.unscramble-list{grid-template-columns:1fr}.unscramble-list label{grid-template-columns:1fr}.picture-match-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.linked-activities{grid-template-columns:1fr}.cloze-passage{line-height:2.2}.inline-cloze{min-width:112px}.fire-complete-row{display:block}.fire-complete-row .primary{width:100%}}

/* ============================================================
   VEC1.0.6 — Sidebar visibility + viewport-safe navigation
   ============================================================ */
/* Close is a mobile-only control. The shared .ui-close styling must not
   decide visibility because VEC1.0.4 intentionally uses !important there. */
.sidebar-close{display:none!important}

/* Keep the brand and footer visible while only the menu list scrolls. */
.sidebar{
  height:100dvh;
  max-height:100dvh;
  overflow:hidden;
}
.sidebar .brand{flex:0 0 auto}
.sidebar nav{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:#ffffff32 transparent;
  padding-right:2px;
}
.sidebar nav::-webkit-scrollbar{width:5px}
.sidebar nav::-webkit-scrollbar-track{background:transparent}
.sidebar nav::-webkit-scrollbar-thumb{background:#ffffff2f;border-radius:999px}
.sidebar nav::-webkit-scrollbar-thumb:hover{background:#ffffff52}
.sidebar .motto{flex:0 0 auto;margin-top:10px}

/* Compact desktop/laptop layout when vertical space is limited. */
@media (min-width:681px) and (max-height:760px){
  .sidebar{padding-top:12px;padding-bottom:12px}
  .sidebar .brand{padding-bottom:12px}
  .sidebar .brand-logo{width:52px!important;height:52px!important;flex-basis:52px!important}
  .sidebar nav{gap:2px}
  .sidebar nav button,.sidebar .admin-link{padding-top:8px;padding-bottom:8px}
  .sidebar hr{margin:5px 0}
  .sidebar label{padding-bottom:1px}
  .sidebar .motto{display:none!important}
}

@media(max-width:680px){
  .sidebar{
    height:100dvh!important;
    max-height:100dvh!important;
    overflow:hidden!important;
  }
  .sidebar-close{
    display:grid!important;
    place-items:center!important;
    position:absolute!important;
    right:10px!important;
    top:10px!important;
    z-index:5!important;
  }
  .sidebar .brand{
    flex:0 0 auto!important;
    padding-right:44px!important;
  }
  .sidebar nav{
    display:flex!important;
    flex:1 1 auto!important;
    min-height:0!important;
    flex-direction:column!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .sidebar .motto{flex:0 0 auto!important;margin-top:9px!important}
}

@media(max-width:680px) and (max-height:700px){
  .sidebar{padding-top:12px!important;padding-bottom:calc(12px + env(safe-area-inset-bottom))!important}
  .sidebar .brand{padding-top:0!important;padding-bottom:10px!important}
  .sidebar .brand-logo{width:50px!important;height:50px!important;flex-basis:50px!important}
  .sidebar nav button,.sidebar .admin-link{padding-top:8px!important;padding-bottom:8px!important}
  .sidebar hr{margin:5px 0!important}
  .sidebar .motto{display:none!important}
}

/* ============================================================
   VEC1.0.7 — Home module grid: container-safe responsive layout
   Fixes overlap/overflow when the actual content column narrows.
   ============================================================ */
#content{
  min-width:0;
  max-width:100%;
}
.module-grid{
  width:100%;
  min-width:0;
  max-width:100%;
  grid-template-columns:minmax(0,1fr)!important;
  gap:16px;
}
@container vecmain (min-width:560px){
  .module-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@container vecmain (min-width:900px){
  .module-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(min-width:681px){
  .module{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }
  .module img{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:16 / 9!important;
    flex:0 0 auto!important;
    object-fit:cover!important;
  }
  .module>div{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:88px!important;
    flex:1 0 auto!important;
    box-sizing:border-box!important;
  }
  .module span,.module b,.module small{
    min-width:0!important;
    max-width:100%!important;
  }
}
@media(max-width:680px){
  .module-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:100%!important;
    max-width:100%!important;
  }
  .module{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
}

/* ============================================================
   VEC1.0.8 — Vocabulary Hub + Challenge & Game
   ============================================================ */
.hub-title,.game-title{display:flex;align-items:flex-end;justify-content:space-between;gap:18px}.hub-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:4px 0 16px}.hub-summary>div{background:#fff;border:1px solid #dfeaf4;border-radius:15px;padding:15px 16px;box-shadow:0 6px 18px #234c740d}.hub-summary strong{display:block;font-size:25px;color:#0b345d}.hub-summary span{font-size:11px;color:#6e8298}.hub-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.hub-toolbar .topic-search{max-width:440px;flex:1}.hub-note,.game-source-note{font-size:11px;color:#6c8298}.vocab-course-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.vocab-course-card{display:grid;grid-template-columns:170px minmax(0,1fr);background:#fff;border:1px solid #dfebf5;border-radius:17px;overflow:hidden;box-shadow:0 7px 18px #264f7510;cursor:pointer;transition:.18s}.vocab-course-card:hover{transform:translateY(-2px);box-shadow:0 12px 24px #264f751c}.vocab-course-cover{min-height:150px;background-size:cover;background-position:center;display:flex;flex-direction:column;justify-content:space-between;padding:13px;color:#fff}.vocab-course-cover span,.vocab-course-cover b{width:max-content;background:#09294dbd;padding:5px 8px;border-radius:8px;font-size:10px}.vocab-course-card>div:last-child{padding:16px;min-width:0}.vocab-course-card h3{margin:0 0 7px}.vocab-course-card p{margin:0 0 10px;color:#607790;font-size:12px}.vocab-course-card button{margin-top:10px;border:0;background:#eaf4ff;color:#1266bf;border-radius:9px;padding:8px 10px;font-weight:700}.mini-progress{height:7px;background:#e7eff7;border-radius:999px;overflow:hidden}.mini-progress i{display:block;height:100%;background:linear-gradient(90deg,#168cff,#10bb7b);border-radius:999px}.vocab-hub-head{display:flex;align-items:center;justify-content:space-between;gap:18px;background:#fff;border:1px solid #dfeaf4;border-radius:17px;padding:17px;margin-bottom:15px}.vocab-hub-head h2{margin:3px 0 6px}.vocab-hub-head p{margin:0;color:#667d94}.vocab-hub-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.vocab-hub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.vocab-hub-card{background:#fff;border:1px solid #dfeaf4;border-radius:16px;overflow:hidden;min-width:0}.vocab-hub-card.mastered{border-color:#94dfbd;box-shadow:0 0 0 2px #10bb7b0d}.vocab-hub-card.review{border-color:#ffc58a}.vocab-hub-card>img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#f8fbfd;padding:10px}.vocab-hub-card>div{padding:13px}.vocab-hub-card h3{margin:0 0 4px;font-size:16px}.vocab-hub-card .ipa{display:block;color:#1674e8;font-size:12px;margin-bottom:5px}.vocab-hub-card p{margin:0 0 5px;font-size:13px}.vocab-hub-card small{display:block;color:#6a7e94;line-height:1.4}.vocab-status-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:12px}.vocab-status-actions button{border:0;border-radius:9px;padding:8px 5px;font-size:11px;font-weight:700;cursor:pointer}.vocab-review{background:#fff2df;color:#b96b12}.vocab-master{background:#e7f8f0;color:#087a51}.daily-challenge-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.daily-challenge{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:1px solid #dfeaf4;border-radius:16px;padding:14px}.daily-challenge.done{border-color:#9ddfc2;background:#fbfffd}.daily-challenge h3{font-size:14px;margin:4px 0}.daily-challenge p{margin:0;color:#6b8095;font-size:11px}.daily-challenge>div>span{font-size:9px;font-weight:800;letter-spacing:.12em;color:#168cff}.challenge-ring{width:54px;height:54px;flex:0 0 54px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#10bb7b var(--pct),#e7eff6 0);position:relative}.challenge-ring:before{content:"";position:absolute;inset:6px;background:#fff;border-radius:50%}.challenge-ring b{position:relative;font-size:11px;color:#1f496e}.game-section{margin-top:18px}.game-lesson-block{background:#fff;border:1px solid #dfebf5;border-radius:17px;padding:14px;margin-bottom:14px}.game-lesson-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.game-lesson-heading span{font-size:10px;color:#168cff;font-weight:800}.game-lesson-heading h2{font-size:17px;margin:3px 0}.game-lesson-heading button{border:0;background:#edf6ff;color:#1266bf;padding:8px 10px;border-radius:9px;cursor:pointer}.quick-game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.quick-game-card{min-width:0;border:1px solid #e1ebf4;background:#f9fcff;border-radius:14px;padding:13px;display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer}.quick-game-card:hover{background:#f0f8ff;border-color:#bdd9ee}.quick-game-card>i{width:42px;height:42px;flex:0 0 42px;border-radius:12px;background:#fff;display:grid;place-items:center;font-size:21px;font-style:normal;box-shadow:0 5px 13px #153b6110}.quick-game-card>span{flex:1;min-width:0}.quick-game-card b,.quick-game-card small,.quick-game-card em{display:block}.quick-game-card b{font-size:13px;color:#153756}.quick-game-card small{font-size:10px;color:#697f95;margin-top:3px;line-height:1.3}.quick-game-card em{font-style:normal;font-size:9px;color:#0a8b60;margin-top:4px}.quick-game-card>strong{color:#168cff}.mission-teaser{margin-top:18px;border-radius:18px;padding:19px;background:linear-gradient(135deg,#092c52,#0d466f);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:16px}.mission-teaser h2{margin:4px 0 7px}.mission-teaser p{margin:0;max-width:700px;color:#d7e8f5;font-size:12px;line-height:1.55}.mission-teaser button{border:1px solid #ffffff45;background:#ffffff12;color:#fff;padding:10px 14px;border-radius:10px}.game-dialog{max-width:820px}.game-dialog>p{color:#667d94}.game-dialog-body{max-height:min(62vh,620px);overflow:auto;padding-right:4px}.game-question,.game-text-item{display:block;background:#f8fbfe;border:1px solid #e1ebf4;border-radius:13px;padding:12px;margin-bottom:9px}.game-question>b,.game-text-item>b{display:block;margin-bottom:9px;font-size:13px}.game-question label{display:flex;align-items:flex-start;gap:7px;background:#fff;border:1px solid #e2ebf3;padding:8px 9px;border-radius:9px;margin:5px 0;cursor:pointer}.game-question input[type=radio]{margin-top:3px}.game-text-item input{width:100%}.picture-game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.picture-game-item{background:#f8fbfe;border:1px solid #e0ebf4;border-radius:13px;padding:8px}.picture-game-item img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff;border-radius:9px}.picture-game-item select{margin-top:7px}.cloze-passage{background:#f8fbfe;border:1px solid #e0ebf4;border-radius:13px;padding:14px;line-height:1.65;font-size:13px}.cloze-selects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}.cloze-selects label{display:grid;grid-template-columns:26px 1fr;align-items:center;gap:7px}.cloze-selects b{width:26px;height:26px;border-radius:8px;background:#eaf4ff;color:#1674e8;display:grid;place-items:center;font-size:11px}.game-score{margin:12px 0;padding:12px;border-radius:12px;display:flex;align-items:center;gap:12px}.game-score strong{font-size:25px}.game-score span{font-size:12px}.game-score.pass{background:#eaf9f2;color:#07734c}.game-score.retry{background:#fff2e4;color:#a95e0a}
@media(max-width:1050px){.vocab-hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.quick-game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.daily-challenge-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.hub-title,.game-title,.vocab-hub-head{align-items:flex-start;flex-direction:column}.hub-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.hub-summary>div{padding:11px}.hub-summary strong{font-size:21px}.hub-toolbar{align-items:stretch;flex-direction:column}.vocab-course-list{grid-template-columns:1fr}.vocab-course-card{grid-template-columns:118px minmax(0,1fr)}.vocab-course-cover{min-height:125px}.vocab-hub-actions{justify-content:flex-start}.vocab-hub-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.vocab-hub-card>div{padding:9px}.vocab-hub-card h3{font-size:13px}.vocab-status-actions{grid-template-columns:1fr;gap:5px}.daily-challenge-grid{grid-template-columns:1fr}.quick-game-grid{grid-template-columns:1fr}.game-lesson-heading{align-items:flex-start}.picture-game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cloze-selects{grid-template-columns:1fr}.mission-teaser{align-items:flex-start;flex-direction:column}.game-dialog-body{max-height:58vh}}
.lesson-hub-intro{display:flex;align-items:flex-start;justify-content:space-between;gap:15px}.lesson-hub-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}@media(max-width:680px){.lesson-hub-intro{flex-direction:column}.lesson-hub-actions{justify-content:flex-start;width:100%}.lesson-hub-actions button{flex:1 1 160px}}


/* ============================================================
   VEC1.0.9 — Modern Vocabulary + Challenge & Game Experience
   Presentation layer only; no database change.
   ============================================================ */
:root{--vec-navy:#082847;--vec-blue:#1674e8;--vec-cyan:#16b7d4;--vec-amber:#ffac32;--vec-green:#10b981;--vec-soft:#f4f8fc;--vec-ink:#133653;--vec-muted:#6b8095}
.section-kicker{display:block;font-size:9px;font-weight:900;letter-spacing:.18em;color:#1682e6;margin-bottom:5px}.vocab-hero,.game-hero{position:relative;overflow:hidden;border-radius:26px;margin:2px 0 22px;box-shadow:0 20px 50px #0c315422}.vocab-hero{min-height:300px;padding:32px 34px 92px;color:#fff;background:radial-gradient(circle at 78% 10%,#21b9d43d,transparent 30%),linear-gradient(125deg,#071f3a 0%,#0b4776 58%,#1074b5 100%)}.vocab-hero:after{content:"";position:absolute;width:360px;height:360px;border:1px solid #ffffff18;border-radius:50%;right:-120px;top:-165px;box-shadow:0 0 0 52px #ffffff07,0 0 0 104px #ffffff05}.vocab-hero-copy{position:relative;z-index:2;max-width:600px}.vocab-kicker,.game-kicker{display:inline-flex;align-items:center;gap:7px;font-size:9px;letter-spacing:.2em;font-weight:900;color:#7ad8ff}.vocab-kicker:before,.game-kicker:before{content:"";width:20px;height:2px;border-radius:3px;background:#ffb23d}.vocab-hero h1,.game-hero h1{font-size:clamp(30px,3vw,47px);line-height:1.03;letter-spacing:-.045em;margin:9px 0 12px}.vocab-hero h1 em,.game-hero h1 em{font-style:normal;color:#ffbd48}.vocab-hero-copy>p,.game-hero-copy>p{max-width:590px;margin:0;color:#d3e7f6;font-size:13px;line-height:1.65}.vocab-hero-actions,.game-hero-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:21px}.vocab-hero-actions button,.game-hero-actions button{border:0;border-radius:12px;padding:11px 15px;font-weight:800;font-size:11px;cursor:pointer}.vocab-cta,.game-hero-actions button:first-child{background:linear-gradient(135deg,#ffb32d,#ff811c);color:#fff;box-shadow:0 9px 24px #ff8b2f3a}.vocab-ghost,.game-hero-actions button:last-child{background:#ffffff14;border:1px solid #ffffff2e!important;color:#fff}.vocab-hero-visual{position:absolute;right:52px;top:42px;width:300px;height:160px;z-index:1}.float-card{position:absolute;border:1px solid #ffffff35;background:#ffffff17;backdrop-filter:blur(12px);box-shadow:0 18px 35px #001b3440;border-radius:17px;padding:13px 15px;color:#fff}.float-card small,.float-card span{display:block;font-size:9px;color:#c6e8fa}.float-card b{display:block;font-size:18px;margin:4px 0}.fc-a{right:54px;top:2px;width:178px;animation:vecFloat 5s ease-in-out infinite}.fc-b{right:0;top:94px;display:flex;gap:8px;align-items:center;animation:vecFloat 5.8s ease-in-out .7s infinite}.fc-b span{font-size:20px}.fc-b b{font-size:10px}.fc-c{left:0;top:86px;animation:vecFloat 6.5s ease-in-out 1.1s infinite}.fc-c b{font-size:23px;color:#ffd274}.vocab-hero-stats{position:absolute;left:0;right:0;bottom:0;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);background:#041d34a8;border-top:1px solid #ffffff18;backdrop-filter:blur(11px);padding:14px 28px}.vocab-hero-stats>div{padding:0 17px;border-right:1px solid #ffffff18}.vocab-hero-stats>div:last-child{border-right:0}.vocab-hero-stats strong{display:block;font-size:22px;color:#fff}.vocab-hero-stats span{font-size:9px;color:#a9cce3}.vocab-library{margin-top:8px}.vocab-library-head{align-items:flex-end}.vocab-library-head h2{margin:2px 0 0}.modern-toolbar{margin:12px 0 15px}.modern-toolbar .topic-search{max-width:540px;height:42px;border-radius:13px;box-shadow:0 5px 16px #173d6010}.vocab-filter-chip{font-size:10px;font-weight:800;color:#32698e;background:#edf6fc;border:1px solid #d8e9f5;padding:7px 10px;border-radius:999px}.vocab-course-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.vocab-course-card{grid-template-columns:190px minmax(0,1fr);border-radius:20px;border-color:#dce8f2;box-shadow:0 10px 28px #163e6410;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}.vocab-course-card:hover{transform:translateY(-4px);border-color:#b9d8ee;box-shadow:0 18px 38px #163e6420}.vocab-course-cover{min-height:174px;position:relative;padding:14px;background-position:center;background-size:cover}.vocab-cover-top{display:flex;justify-content:space-between;align-items:flex-start}.vocab-course-cover span,.vocab-course-cover b{position:static;width:auto;display:inline-flex;background:#061f38b8;border:1px solid #ffffff20}.vocab-cover-word{position:absolute;left:14px;right:14px;bottom:14px;font-size:13px;font-weight:900;letter-spacing:.07em;text-shadow:0 2px 12px #0008}.vocab-course-info{padding:18px!important;display:flex;flex-direction:column}.course-source{font-size:9px;letter-spacing:.12em;text-transform:uppercase;font-weight:850;color:#1682e6}.vocab-course-card h3{font-size:18px;margin:5px 0 7px}.vocab-course-card p{font-size:11px;line-height:1.5}.vocab-course-card p em{font-style:normal;color:#c87615}.course-progress-row{display:flex;align-items:center;gap:9px;margin-top:auto}.course-progress-row .mini-progress{flex:1;height:6px}.course-progress-row>b{font-size:10px;color:#54748e}.vocab-course-card button{align-self:flex-start;background:transparent;padding:9px 0 0;color:#146fc9}.vocab-course-card button span{display:inline-block;transition:.18s}.vocab-course-card:hover button span{transform:translateX(3px)}.vocab-back{margin-bottom:12px}.vocab-set-hero{display:grid;grid-template-columns:280px minmax(0,1fr);gap:0;background:#fff;border:1px solid #dce8f2;border-radius:22px;overflow:hidden;box-shadow:0 10px 30px #183e6210}.vocab-set-cover{min-height:210px;background-size:cover;background-position:center;padding:18px;color:#fff;display:flex;flex-direction:column;justify-content:space-between}.vocab-set-cover span{font-size:9px;font-weight:900;letter-spacing:.12em}.vocab-set-cover b{font-size:24px;line-height:1.05}.vocab-set-info{padding:23px 24px;min-width:0}.vocab-set-info h1{margin:3px 0 6px;font-size:28px;letter-spacing:-.035em;color:#133b5d}.vocab-set-info>p{margin:0;color:#6c8194;font-size:12px}.set-progress{height:8px;background:#e9f0f6;border-radius:999px;margin:15px 0 16px;position:relative;overflow:visible}.set-progress i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#168cff,#16bf88);box-shadow:0 3px 10px #16a18028}.set-progress span{position:absolute;right:0;top:12px;font-size:9px;color:#7890a4}.vocab-mode-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:16px 0}.vocab-mode-tabs button{border:1px solid #dce8f2;background:#fff;border-radius:14px;padding:11px 13px;display:flex;align-items:center;gap:9px;text-align:left;cursor:pointer;color:#47647d;transition:.18s}.vocab-mode-tabs button:hover{border-color:#b8d7ee;background:#f8fcff}.vocab-mode-tabs button.active{background:linear-gradient(135deg,#0b4777,#147ec9);border-color:transparent;color:#fff;box-shadow:0 8px 20px #0b67aa26}.vocab-mode-tabs i{font-style:normal;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:#edf6fd;color:#1778cf;font-weight:900}.vocab-mode-tabs button.active i{background:#ffffff18;color:#fff}.vocab-mode-tabs span{font-size:11px;font-weight:800}.vocab-mode-tabs small{display:block;font-size:8px;font-weight:500;opacity:.7;margin-top:2px}.vocab-mode-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin:20px 0 12px}.vocab-mode-intro h2{font-size:19px;margin:2px 0}.vocab-mode-intro>p{max-width:460px;margin:0;color:#6e8295;font-size:11px;line-height:1.55}.vocab-hub-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.vocab-hub-card{border-radius:18px;border-color:#dfe9f2;box-shadow:0 7px 20px #173d6010;transition:.2s}.vocab-hub-card:hover{transform:translateY(-3px);box-shadow:0 13px 26px #173d601b}.vocab-image-wrap{position:relative;background:linear-gradient(145deg,#f7fbfe,#edf5fb);aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden}.vocab-image-wrap>img{width:100%;height:100%;object-fit:contain;padding:12px}.vocab-image-fallback{font-size:42px;font-weight:900;color:#b8cee0}.vocab-sound{position:absolute;right:10px;top:10px;width:34px;height:34px;border:1px solid #dbe9f3;border-radius:50%;background:#ffffffeb;box-shadow:0 5px 14px #123b5c18;cursor:pointer}.vocab-state{position:absolute;left:9px;bottom:9px;border-radius:999px;padding:5px 8px;font-size:8px;font-weight:850;backdrop-filter:blur(8px)}.vocab-state.mastered{background:#e4f8efdd;color:#087a51}.vocab-state.review{background:#fff0dadd;color:#ac650d}.vocab-card-copy{padding:14px!important}.vocab-card-copy h3{font-size:17px}.vocab-card-copy blockquote{margin:8px 0 0;padding:8px 9px;border-left:2px solid #94c9ed;background:#f5faff;border-radius:0 8px 8px 0;color:#607990;font-size:10px;line-height:1.45}.vocab-status-actions button{transition:.16s}.vocab-status-actions button:hover{transform:translateY(-1px)}.flashcard-workspace{max-width:720px;margin:23px auto 0}.flashcard-top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}.flashcard-top h2{margin:3px 0;font-size:20px}.flashcard-counter{display:flex;align-items:baseline;gap:3px;color:#6b8296}.flashcard-counter b{font-size:25px;color:#123b5c}.flash-progress{height:5px;border-radius:999px;background:#e7eff5;margin:10px 0 16px;overflow:hidden}.flash-progress i{display:block;height:100%;background:linear-gradient(90deg,#168cff,#16bd8c);border-radius:999px;transition:.25s}.flashcard{display:block;width:100%;height:390px;border:0;background:transparent;padding:0;perspective:1200px;cursor:pointer}.flashcard-inner{position:relative;width:100%;height:100%;transition:transform .48s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}.flashcard.flipped .flashcard-inner{transform:rotateY(180deg)}.flash-face{position:absolute;inset:0;backface-visibility:hidden;border:1px solid #dce8f2;border-radius:24px;background:linear-gradient(145deg,#fff,#f6fbff);box-shadow:0 22px 45px #173d601b;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;overflow:hidden}.flash-front:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-120px;top:-130px;background:#168cff0b;box-shadow:0 0 0 55px #16b7d408}.flash-face img{width:min(190px,45%);height:140px;object-fit:contain;margin-bottom:14px;position:relative;z-index:1}.flash-label{font-size:8px;font-weight:900;letter-spacing:.18em;color:#1682e6}.flash-face h3{font-size:35px;letter-spacing:-.035em;color:#123b5c;margin:7px 0}.flash-face p{margin:0;color:#53748f;line-height:1.55}.flash-face small{position:absolute;bottom:20px;color:#8ca0b2;font-size:9px}.flash-back{transform:rotateY(180deg);background:linear-gradient(145deg,#092c52,#126aa5);color:#fff;border-color:#0e598a}.flash-back .flash-label{color:#8ddcff}.flash-back h3{color:#fff;font-size:31px}.flash-back p{color:#d5e8f5;max-width:520px}.flash-back blockquote{margin:16px 0 0;padding:12px 15px;border:1px solid #ffffff21;border-radius:12px;background:#ffffff0e;color:#e7f3fb;font-size:12px}.flash-back small{color:#a9cee5}.flashcard-controls{display:flex;justify-content:center;gap:9px;margin-top:14px}.flashcard-controls button{height:40px;min-width:48px;border:1px solid #dce8f2;border-radius:12px;background:#fff;color:#315c7c;font-weight:800;cursor:pointer}.flashcard-controls .flash-listen{min-width:100px;background:#eaf5ff;color:#126bc1;border-color:#cce5f7}.flashcard-memory{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px auto 0;max-width:420px}.flashcard-memory button{border:0;border-radius:12px;padding:11px;font-weight:800;cursor:pointer}.flashcard-memory .need-review{background:#fff0dd;color:#aa6514}.flashcard-memory .got-it{background:#e7f8f0;color:#087a51}.vocab-practice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.vocab-practice-grid button{position:relative;overflow:hidden;min-height:175px;border:1px solid #dce8f2;border-radius:18px;background:linear-gradient(150deg,#fff,#f5faff);padding:18px;text-align:left;cursor:pointer;transition:.2s}.vocab-practice-grid button:hover{transform:translateY(-4px);box-shadow:0 15px 30px #153c6018;border-color:#a9d1ed}.vocab-practice-grid i{font-style:normal;font-size:28px}.vocab-practice-grid b,.vocab-practice-grid span,.vocab-practice-grid em{display:block}.vocab-practice-grid b{font-size:15px;color:#153b5c;margin:12px 0 5px}.vocab-practice-grid span{font-size:10px;color:#71869a}.vocab-practice-grid em{font-style:normal;font-size:9px;color:#1678d1;font-weight:900;letter-spacing:.1em;position:absolute;bottom:15px}.vocab-review-empty{padding:55px 20px;text-align:center;background:#fff;border:1px dashed #cbddea;border-radius:20px}.vocab-review-empty i{display:grid;place-items:center;width:58px;height:58px;margin:auto;border-radius:50%;background:#e8f8f1;color:#0b9162;font-style:normal;font-size:24px}.vocab-review-empty h3{margin:12px 0 5px;color:#183c5a}.vocab-review-empty p{margin:0;color:#71869a;font-size:11px}.vocab-review-empty button{margin-top:14px;border:0;border-radius:11px;padding:10px 14px;background:#1477ce;color:#fff;font-weight:800;cursor:pointer}
.game-hero{min-height:290px;padding:32px 35px;color:#fff;background:radial-gradient(circle at 82% 25%,#16b7d43b,transparent 25%),radial-gradient(circle at 55% 100%,#ffad2a18,transparent 30%),linear-gradient(125deg,#061d36 0%,#0b3c6c 55%,#135b8c 100%)}.game-hero-copy{position:relative;z-index:2;max-width:620px}.game-hero-score{position:absolute;right:38px;top:38px;width:290px;z-index:2;display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:center}.hero-progress-ring{width:118px;height:118px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#ffb334 var(--pct),#ffffff1d 0);position:relative;box-shadow:0 12px 30px #00182f45}.hero-progress-ring:before{content:"";position:absolute;inset:9px;border-radius:50%;background:#0a3963}.hero-progress-ring>span{position:relative;text-align:center}.hero-progress-ring b{display:block;font-size:26px}.hero-progress-ring small{font-size:9px;color:#a9cde4}.hero-stats{display:grid;gap:7px}.hero-stats>div{padding:8px 10px;border:1px solid #ffffff20;background:#ffffff0d;border-radius:11px;backdrop-filter:blur(8px)}.hero-stats b{display:block;font-size:15px;color:#fff}.hero-stats span{font-size:8px;color:#b6d4e7}.game-spark{position:absolute;color:#ffffff38;font-size:24px;animation:vecFloat 5s ease-in-out infinite}.game-spark.s1{right:345px;top:42px}.game-spark.s2{right:28px;bottom:25px;color:#ffc55e88}.game-spark.s3{left:52%;bottom:16px;font-size:15px}.game-challenge-section{margin-bottom:22px}.game-challenge-section .section-head,.game-section .section-head{align-items:flex-end}.game-challenge-section .section-head h2,.game-section .section-head h2{margin:2px 0}.daily-challenge-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.daily-challenge{position:relative;overflow:hidden;justify-content:flex-start;gap:11px;padding:15px;border-radius:18px;box-shadow:0 8px 22px #153b6010;transition:.2s}.daily-challenge:hover{transform:translateY(-2px);box-shadow:0 13px 28px #153b6018}.challenge-number{width:37px;height:37px;flex:0 0 37px;border-radius:11px;background:#edf6fd;color:#1478ce;display:grid;place-items:center;font-size:10px;font-weight:900}.daily-challenge.done .challenge-number{background:#e2f7ed;color:#078052}.challenge-copy{flex:1;min-width:0}.challenge-copy>span{font-size:8px!important;letter-spacing:.13em}.challenge-copy h3{font-size:13px;margin:4px 0}.challenge-copy p{font-size:9px}.challenge-bar{height:4px;background:#e7eef4;border-radius:999px;margin-top:8px;overflow:hidden}.challenge-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#168cff,#14bc88)}.challenge-ring{width:48px;height:48px;flex-basis:48px}.challenge-ring:before{inset:5px}.game-lesson-block{border-radius:20px;padding:17px;margin-bottom:16px;box-shadow:0 9px 28px #173e640e}.game-lesson-heading{margin-bottom:14px}.game-lesson-heading h2{font-size:19px}.game-lesson-heading p{margin:2px 0 0;color:#7890a4;font-size:9px}.quick-game-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.quick-game-card{position:relative;overflow:hidden;min-height:142px;align-items:flex-start;border-radius:17px;padding:15px;background:linear-gradient(145deg,#fbfdff,#f2f8fd);transition:.2s}.quick-game-card:hover{transform:translateY(-4px);box-shadow:0 15px 30px #143c6018}.game-card-glow{position:absolute;width:95px;height:95px;border-radius:50%;right:-38px;top:-40px;background:#168cff10}.quick-game-card>i{width:46px;height:46px;flex-basis:46px;border-radius:14px;font-size:22px}.game-card-copy{display:block;flex:1;min-width:0}.game-card-copy>small{font-size:8px;color:#7b90a4;text-transform:uppercase;letter-spacing:.08em}.game-card-copy>b{font-size:14px;margin-top:5px}.game-card-copy>em{font-size:9px;font-style:normal;color:#6d8397;line-height:1.4;margin-top:3px}.game-card-copy>strong{font-size:8px;color:#0b8b60;margin-top:9px;font-weight:800}.game-card-arrow{align-self:flex-end;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#e6f3fd;color:#1676cc;font-weight:900;transition:.18s}.quick-game-card:hover .game-card-arrow{transform:translateX(2px);background:#1676cc;color:#fff}.type-speed_quiz>i{background:#fff4df}.type-word_scramble>i{background:#eaf4ff}.type-picture_match>i{background:#e9f9f3}.type-cloze>i{background:#f2ecff}.type-vocab_match>i{background:#fff0ef}.mission-teaser{position:relative;overflow:hidden;padding:22px 24px;border-radius:22px;background:radial-gradient(circle at 90% 15%,#ffb03625,transparent 24%),linear-gradient(130deg,#071f3a,#0b466f);box-shadow:0 15px 34px #10375920}.mission-teaser:after{content:"";position:absolute;width:230px;height:230px;border-radius:50%;right:-100px;bottom:-155px;border:1px solid #ffffff16;box-shadow:0 0 0 40px #ffffff06}.mission-icon{width:60px;height:60px;flex:0 0 60px;border-radius:17px;background:#ffffff14;border:1px solid #ffffff1c;display:grid;place-items:center;font-size:28px}.mission-teaser>div:nth-child(2){flex:1}.mission-tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:12px}.mission-tags span{font-size:8px;padding:5px 7px;border-radius:7px;background:#ffffff12;border:1px solid #ffffff16;color:#cde5f4}.mission-tags i{font-style:normal;color:#76bfe9}.game-modal{background:#021426bd;backdrop-filter:blur(8px)}.game-arena-modal{width:min(980px,96vw)!important;max-height:94vh!important;padding:0!important;overflow:hidden!important;border-radius:24px!important;background:#f6f9fc!important}.game-modal .modal-close{z-index:5;top:15px;right:16px;background:#ffffff18!important;border-color:#ffffff20!important;color:#fff!important}.game-dialog{max-width:none}.game-arena-head{padding:19px 62px 17px 22px;background:linear-gradient(120deg,#082b50,#0f669e);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px}.game-arena-head>div:first-child{display:flex;align-items:center;gap:11px}.game-arena-icon{width:43px;height:43px;border-radius:13px;background:#ffffff15;border:1px solid #ffffff20;display:grid;place-items:center;font-size:21px}.game-arena-head small,.game-arena-head b{display:block}.game-arena-head small{font-size:8px;letter-spacing:.12em;color:#9cd9f6}.game-arena-head b{font-size:18px;margin-top:2px}.game-arena-meta{display:flex;gap:7px}.game-arena-meta span{font-size:9px;padding:6px 8px;border-radius:8px;background:#ffffff13;border:1px solid #ffffff18}.game-arena-lesson{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:11px 22px;background:#fff;border-bottom:1px solid #e1e9f0}.game-arena-lesson>span{font-size:10px;font-weight:800;color:#345b78}.game-arena-lesson>div{height:5px;border-radius:999px;background:#e7eef4;overflow:hidden}.game-arena-lesson i{display:block;height:100%;background:linear-gradient(90deg,#168cff,#16bd8b);border-radius:999px;transition:.2s}.game-arena-lesson>b{font-size:9px;color:#6f8699}.game-dialog-body{max-height:calc(94vh - 215px);padding:18px 22px 7px;overflow:auto}.game-question,.game-text-item{position:relative;background:#fff;border:1px solid #dfe9f2;border-radius:16px;padding:14px;margin-bottom:11px;box-shadow:0 5px 16px #183d5e0a;transition:.18s}.game-question{display:grid;grid-template-columns:36px 1fr;gap:11px}.game-q-no{width:34px;height:34px;border-radius:10px;background:#eaf5fd;color:#1677cd;display:grid;place-items:center;font-size:9px;font-weight:900}.game-q-content>b{font-size:13px;color:#173b59;line-height:1.45}.answer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:10px}.game-question label{margin:0;border-radius:11px;min-height:43px;align-items:center}.game-question label:has(input:checked){border-color:#65afe5;background:#edf8ff;box-shadow:0 0 0 2px #168cff10}.answer-letter{width:24px;height:24px;flex:0 0 24px;border-radius:7px;background:#edf4f9;display:grid;place-items:center;font-size:8px;font-weight:900;color:#52718b}.game-question label:has(input:checked) .answer-letter{background:#1678cf;color:#fff}.game-text-item{display:grid;grid-template-columns:38px 1fr;gap:10px}.game-text-item small{display:block;font-size:7px;letter-spacing:.15em;color:#1680df;font-weight:900}.game-text-item b{font-size:15px;letter-spacing:.13em;color:#143b5c;margin:4px 0 8px}.game-text-item input{height:42px;border-radius:10px}.picture-game-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.picture-game-item{position:relative;border-radius:16px;background:#fff;padding:9px;box-shadow:0 5px 16px #183d5e0a}.picture-no{position:absolute;left:14px;top:14px;z-index:2;border-radius:8px;padding:4px 6px;background:#092b4ec9;color:#fff;font-size:8px;font-weight:900}.picture-game-item img{border-radius:11px;background:#f7fafc}.word-bank{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}.word-bank span{font-size:9px;font-weight:750;color:#1a638f;padding:6px 8px;border-radius:8px;background:#eaf5fd;border:1px solid #d4eafa}.cloze-passage{background:#fff;border-radius:16px;padding:16px;box-shadow:0 5px 16px #183d5e0a}.answer-correct{border-color:#79d3ad!important;box-shadow:0 0 0 2px #10b98118!important}.answer-wrong{border-color:#f2b58e!important;box-shadow:0 0 0 2px #ef7d3814!important}.game-arena-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 22px 16px;background:#f6f9fc;border-top:1px solid #e3ebf2}.game-arena-footer>span{font-size:9px;color:#71879a}.game-submit{padding:11px 18px}.game-submit:disabled{opacity:.6;cursor:wait}.game-result-card{margin:9px 22px 13px;border-radius:17px;padding:14px 16px;display:grid;grid-template-columns:150px 1fr auto;gap:17px;align-items:center;border:1px solid #dfe9f2;background:#fff;box-shadow:0 8px 22px #163e6110}.game-result-card.pass{border-color:#a3dfc6}.game-result-card.retry{border-color:#f1c69e}.result-score strong,.result-score span{display:block}.result-score strong{font-size:32px;letter-spacing:-.04em;color:#0b7d58}.game-result-card.retry .result-score strong{color:#b26719}.result-score span{font-size:9px;color:#75899b}.result-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.result-metrics div{padding:7px 9px;border-radius:9px;background:#f5f9fc;text-align:center}.result-metrics b,.result-metrics span{display:block}.result-metrics b{font-size:14px;color:#234b69}.result-metrics span{font-size:7px;color:#8194a4}.result-actions{display:flex;gap:6px}.result-actions button{border:0;border-radius:9px;padding:8px 10px;font-size:9px;font-weight:800;cursor:pointer}.result-actions button:first-child{background:#eaf5fd;color:#146fc5}.result-actions button:last-child{background:#0e78ca;color:#fff}
@keyframes vecFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media(max-width:1180px){.vocab-hero-visual{opacity:.5;right:15px}.game-hero-score{right:25px}.vocab-hub-grid,.quick-game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.daily-challenge-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:860px){.vocab-hero,.game-hero{padding:27px 25px 88px}.vocab-hero-visual{display:none}.game-hero{padding-right:25px}.game-hero-score{position:relative;right:auto;top:auto;width:100%;grid-template-columns:95px 1fr;margin-top:22px}.hero-progress-ring{width:90px;height:90px}.vocab-set-hero{grid-template-columns:190px minmax(0,1fr)}.vocab-mode-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.game-result-card{grid-template-columns:120px 1fr}.result-actions{grid-column:1/-1;justify-content:flex-end}}
@media(max-width:680px){.vocab-hero,.game-hero{border-radius:20px;margin-top:0;padding:23px 19px 82px;min-height:0}.vocab-hero h1,.game-hero h1{font-size:31px}.vocab-hero-copy>p,.game-hero-copy>p{font-size:11px}.vocab-hero-stats{padding:11px 7px}.vocab-hero-stats>div{padding:0 7px}.vocab-hero-stats strong{font-size:18px}.vocab-hero-stats span{font-size:7px}.vocab-course-list{grid-template-columns:1fr}.vocab-course-card{grid-template-columns:122px minmax(0,1fr);border-radius:16px}.vocab-course-cover{min-height:142px;padding:9px}.vocab-cover-word{left:9px;right:9px;bottom:9px;font-size:9px}.vocab-course-info{padding:12px!important}.vocab-course-card h3{font-size:14px}.vocab-course-card p{font-size:9px}.vocab-set-hero{grid-template-columns:1fr}.vocab-set-cover{min-height:145px}.vocab-set-info{padding:17px}.vocab-set-info h1{font-size:23px}.vocab-hub-actions{margin-top:17px}.vocab-mode-tabs{gap:6px}.vocab-mode-tabs button{padding:9px 8px}.vocab-mode-tabs i{width:27px;height:27px}.vocab-mode-tabs small{display:none}.vocab-mode-intro{display:block}.vocab-mode-intro>p{margin-top:5px}.vocab-hub-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.vocab-card-copy{padding:9px!important}.vocab-card-copy h3{font-size:13px}.vocab-card-copy p{font-size:10px}.vocab-card-copy small,.vocab-card-copy blockquote{display:none}.vocab-sound{width:30px;height:30px}.vocab-state{font-size:7px}.flashcard{height:370px}.flash-face{padding:22px}.flash-face h3{font-size:29px}.flash-back h3{font-size:25px}.vocab-practice-grid{grid-template-columns:1fr}.game-hero-score{grid-template-columns:80px 1fr}.hero-progress-ring{width:78px;height:78px}.hero-progress-ring:before{inset:7px}.hero-progress-ring b{font-size:20px}.hero-stats{grid-template-columns:repeat(3,1fr);gap:5px}.hero-stats>div{padding:7px}.daily-challenge-grid,.quick-game-grid{grid-template-columns:1fr}.mission-teaser{padding:18px;align-items:flex-start}.mission-icon{width:48px;height:48px;flex-basis:48px}.mission-tags{display:none}.game-arena-modal{width:100vw!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important}.game-modal{padding:0!important}.game-arena-head{padding:15px 54px 13px 14px}.game-arena-meta{display:none}.game-arena-lesson{padding:9px 14px}.game-arena-lesson>span{max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.game-dialog-body{max-height:calc(100dvh - 190px);padding:13px 12px 5px}.game-question{grid-template-columns:30px 1fr;padding:11px;gap:8px}.game-q-no{width:29px;height:29px}.answer-grid{grid-template-columns:1fr}.picture-game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.game-arena-footer{padding:10px 12px 12px;position:sticky;bottom:0}.game-arena-footer>span{display:none}.game-arena-footer .game-submit{width:100%}.game-result-card{margin:8px 12px 10px;grid-template-columns:1fr;padding:12px}.result-score{text-align:center}.result-metrics{gap:5px}.result-actions{justify-content:stretch}.result-actions button{flex:1}.game-modal .modal-close{top:9px;right:8px}}
@media(prefers-reduced-motion:reduce){.float-card,.game-spark{animation:none}.flashcard-inner,.vocab-course-card,.quick-game-card,.daily-challenge{transition:none}}


/* ============================================================
   VEC1.0.10 — Game UI Polish
   Larger game-card typography, integrated CTA, clean arena corners.
   Presentation layer only; no database change.
   ============================================================ */
.quick-game-grid{gap:14px}
.quick-game-card{
  position:relative;
  overflow:hidden;
  min-width:0;
  min-height:184px;
  display:grid;
  grid-template-columns:56px minmax(0,1fr);
  grid-template-rows:auto 42px;
  column-gap:14px;
  row-gap:15px;
  align-items:start;
  padding:18px;
  border:1px solid #dce8f2;
  border-radius:20px;
  background:linear-gradient(145deg,#ffffff 0%,#f4f9fd 100%);
  box-shadow:0 8px 22px #153b6010;
  text-align:left;
  cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease;
}
.quick-game-card:hover{
  transform:translateY(-4px);
  border-color:#b8d7ed;
  background:linear-gradient(145deg,#ffffff 0%,#eef8ff 100%);
  box-shadow:0 16px 34px #153b601c;
}
.quick-game-card:focus-visible{outline:3px solid #168cff2e;outline-offset:3px}
.game-card-glow{width:132px;height:132px;right:-52px;top:-56px;background:#168cff0d;pointer-events:none}
.quick-game-card>i{
  position:relative;
  z-index:1;
  width:56px;
  height:56px;
  flex:0 0 56px;
  border-radius:17px;
  font-size:26px;
  box-shadow:0 7px 18px #153b6112;
}
.game-card-copy{position:relative;z-index:1;display:block;min-width:0;padding-top:1px}
.game-card-copy>small{
  display:block;
  margin:0 0 5px;
  font-size:10.5px;
  line-height:1.25;
  color:#71879a;
  text-transform:none;
  letter-spacing:.01em;
  font-weight:700;
}
.game-card-copy>b{
  display:block;
  margin:0;
  color:#123b5b;
  font-size:18px;
  line-height:1.2;
  letter-spacing:-.018em;
  font-weight:850;
}
.game-card-copy>em{
  display:block;
  margin-top:6px;
  color:#637c91;
  font-size:12.5px;
  line-height:1.45;
  font-style:normal;
}
.game-card-copy>strong{
  display:block;
  margin-top:9px;
  color:#0a8a60;
  font-size:10px;
  line-height:1.3;
  font-weight:800;
}
.game-card-cta{
  position:relative;
  z-index:1;
  grid-column:1/-1;
  align-self:end;
  min-height:42px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:12px;
  background:linear-gradient(135deg,#157cd3,#0d65b6);
  color:#fff;
  box-shadow:0 7px 18px #126fb52c;
  font-size:12px;
  line-height:1;
  font-weight:850;
  letter-spacing:.005em;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.game-card-cta>span{display:inline-block;font-size:17px;line-height:1;transition:transform .18s ease}
.quick-game-card:hover .game-card-cta{box-shadow:0 9px 22px #126fb53b;filter:saturate(1.06)}
.quick-game-card:hover .game-card-cta>span{transform:translateX(3px)}
.game-card-arrow{display:none!important}

/* The arena's outermost shell is dark, matching the header. This avoids the
   light/white anti-aliased fringe that could appear around the top corners. */
.game-modal{background:#021426c7;backdrop-filter:blur(9px)}
.game-arena-modal{
  width:min(980px,96vw)!important;
  max-height:94vh!important;
  padding:0!important;
  overflow:hidden!important;
  border:0!important;
  outline:0!important;
  border-radius:24px!important;
  background:#082b50!important;
  box-shadow:0 34px 90px #00132670!important;
  isolation:isolate;
  clip-path:inset(0 round 24px);
}
.game-arena-modal>.modal-close{box-shadow:none!important}
.game-dialog{
  max-width:none;
  width:100%;
  overflow:hidden;
  border-radius:inherit;
  background:linear-gradient(120deg,#082b50,#0f669e);
}
.game-arena-head{
  border-radius:0;
  background:linear-gradient(120deg,#082b50 0%,#0d4f80 58%,#0f669e 100%);
  box-shadow:none;
}
.game-arena-lesson,.game-dialog-body,#gameResult,.game-arena-footer{background:#f6f9fc}
.game-arena-lesson{background:#fff}
.game-modal .modal-close{
  background:#ffffff16!important;
  border:1px solid #ffffff24!important;
  color:#fff!important;
  box-shadow:none!important;
}
.game-modal .modal-close:hover{background:#ffffff25!important}

@media(max-width:1180px){
  .quick-game-card{min-height:176px;padding:16px;grid-template-columns:52px minmax(0,1fr)}
  .quick-game-card>i{width:52px;height:52px;font-size:24px}
  .game-card-copy>b{font-size:17px}
  .game-card-copy>em{font-size:12px}
}
@media(max-width:680px){
  .quick-game-grid{gap:11px}
  .quick-game-card{min-height:0;padding:15px;grid-template-columns:50px minmax(0,1fr);grid-template-rows:auto 42px;column-gap:12px;row-gap:13px;border-radius:18px}
  .quick-game-card>i{width:50px;height:50px;font-size:23px;border-radius:15px}
  .game-card-copy>small{font-size:10px}
  .game-card-copy>b{font-size:17px}
  .game-card-copy>em{font-size:12px}
  .game-card-copy>strong{font-size:10px;margin-top:7px}
  .game-card-cta{min-height:42px;font-size:12px;border-radius:11px}
  .game-arena-modal{clip-path:none!important;background:#082b50!important;border-radius:0!important}
  .game-dialog{border-radius:0}
}

/* ============================================================
   VEC1.0.12 — Dense Responsive Vocabulary Grid
   - K2 branding under logo
   - Modern vocabulary cards with responsive 1/2/3/4/5/6-column layout
   - 5–6 vocabulary cards per row on wide/2K content widths
   - Refined pronunciation control with playback state
   Presentation layer only; no database change.
   ============================================================ */

/* Vocabulary grid follows the real content width instead of viewport width.
   Keep cards dense enough to save space, but never narrower than a useful learning card. */
.vocab-hub-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:12px;
  width:100%;
  min-width:0;
  max-width:100%;
  align-items:stretch;
}
@container vecmain (min-width:520px){
  .vocab-hub-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
@container vecmain (min-width:780px){
  .vocab-hub-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
}
@container vecmain (min-width:1040px){
  .vocab-hub-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
}
@container vecmain (min-width:1320px){
  .vocab-hub-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
}
@container vecmain (min-width:1600px){
  .vocab-hub-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
}

.vocab-hub-card{
  position:relative;
  min-width:0;
  max-width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid #d9e7f1;
  border-radius:22px;
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
  box-shadow:0 8px 24px rgba(18,59,92,.08);
  isolation:isolate;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.vocab-hub-card:before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:linear-gradient(90deg,#168cff,#10b9a3);
  opacity:.72;
  z-index:3;
}
.vocab-hub-card:hover{
  transform:translateY(-4px);
  border-color:#b9d7ea;
  box-shadow:0 16px 38px rgba(18,59,92,.14);
}
.vocab-hub-card.mastered:before{background:linear-gradient(90deg,#0eb977,#57d3a5)}
.vocab-hub-card.review:before{background:linear-gradient(90deg,#f2a12b,#ffcb6b)}

.vocab-image-wrap{
  position:relative;
  aspect-ratio:16/10;
  min-height:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 82% 15%,rgba(22,140,255,.12),transparent 32%),
    linear-gradient(145deg,#f7fbfe,#edf5fb);
  border-bottom:1px solid #e7eef4;
}
.vocab-image-wrap:after{
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  border-radius:50%;
  left:-70px;
  bottom:-95px;
  background:rgba(16,185,163,.07);
  pointer-events:none;
}
.vocab-image-wrap>img{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center;
  padding:18px 20px;
  filter:drop-shadow(0 10px 12px rgba(27,64,91,.08));
  transition:transform .22s ease;
}
.vocab-hub-card:hover .vocab-image-wrap>img{transform:scale(1.025)}
.vocab-image-fallback{
  position:relative;
  z-index:1;
  width:74px;
  height:74px;
  display:grid;
  place-items:center;
  border-radius:22px;
  background:#fff;
  color:#7ea6c3;
  font-size:28px;
  font-weight:900;
  box-shadow:0 10px 24px rgba(21,65,94,.1);
}

.vocab-card-copy{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  padding:16px 16px 15px!important;
}
.vocab-word-line{min-width:0}
.vocab-card-copy h3{
  margin:0;
  color:#123a5b;
  font-size:18px;
  line-height:1.2;
  letter-spacing:-.018em;
  font-weight:850;
  overflow-wrap:anywhere;
}
.vocab-card-copy .ipa{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  margin-top:6px;
  padding:4px 8px;
  border-radius:999px;
  background:#edf7ff;
  color:#176fba;
  font-size:11px;
  line-height:1.25;
}
.vocab-card-copy .vocab-meaning{
  margin:10px 0 5px;
  color:#284861;
  font-size:13.5px;
  line-height:1.4;
  font-weight:700;
}
.vocab-card-copy>small{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  color:#6c8194;
  font-size:10.5px;
  line-height:1.45;
}
.vocab-card-copy blockquote{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin:9px 0 0;
  padding:8px 10px;
  border-left:2px solid #82bee8;
  border-radius:0 9px 9px 0;
  background:#f4faff;
  color:#56738b;
  font-size:10px;
  line-height:1.45;
}
.vocab-status-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:auto;
  padding-top:14px;
}
.vocab-status-actions button{
  min-height:38px;
  border-radius:11px;
  font-size:10.5px;
}

/* Pronunciation pill: file audio when available, browser SpeechSynthesis as fallback. */
.vocab-sound,
.vocab-audio-button{
  position:absolute;
  z-index:4;
  top:11px;
  right:11px;
  width:auto;
  min-width:78px;
  height:40px;
  padding:0 12px 0 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid rgba(190,214,232,.92);
  border-radius:999px;
  background:rgba(255,255,255,.94);
  color:#126bb8;
  box-shadow:0 7px 18px rgba(18,59,92,.13);
  backdrop-filter:blur(10px);
  cursor:pointer;
  transition:transform .16s ease,background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease;
}
.vocab-sound:hover{
  transform:translateY(-1px);
  background:#fff;
  border-color:#90c4e6;
  color:#075c9f;
  box-shadow:0 10px 22px rgba(18,59,92,.17);
}
.vocab-sound:focus-visible,.flash-listen:focus-visible{outline:3px solid rgba(22,140,255,.22);outline-offset:2px}
.vocab-sound-icon{width:19px;height:19px;display:grid;place-items:center;flex:0 0 19px}
.vocab-sound-icon svg{width:19px;height:19px;display:block}
.vocab-sound-label{font-size:10.5px;line-height:1;font-weight:850;white-space:nowrap}
.vocab-sound-bars{height:17px;display:none;align-items:center;gap:2px}
.vocab-sound-bars i{display:block;width:2px;border-radius:999px;background:currentColor;animation:vocabAudioBars .72s ease-in-out infinite}
.vocab-sound-bars i:nth-child(1){height:7px;animation-delay:-.22s}
.vocab-sound-bars i:nth-child(2){height:14px;animation-delay:-.08s}
.vocab-sound-bars i:nth-child(3){height:9px;animation-delay:-.35s}
.vocab-sound.playing{
  background:linear-gradient(135deg,#0d75ca,#10a6b7);
  border-color:transparent;
  color:#fff;
  box-shadow:0 10px 24px rgba(13,117,202,.25);
}
.vocab-sound.playing .vocab-sound-bars{display:flex}
.vocab-state{z-index:4;left:11px;bottom:10px;padding:6px 9px;font-size:8.5px;box-shadow:0 5px 14px rgba(22,56,80,.08)}

.flashcard-controls .flash-listen{
  position:relative;
  min-width:112px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 13px;
  border-radius:12px;
}
.flashcard-controls .flash-listen .vocab-sound-icon{width:18px;height:18px;flex-basis:18px}
.flashcard-controls .flash-listen .vocab-sound-icon svg{width:18px;height:18px}
.flashcard-controls .flash-listen .vocab-sound-bars{height:16px}
.flashcard-controls .flash-listen.playing{
  border-color:#72b8e6;
  background:linear-gradient(135deg,#e8f5ff,#e5fbf5);
  color:#075f9f;
}
.flashcard-controls .flash-listen.playing .vocab-sound-bars{display:flex}

@keyframes vocabAudioBars{
  0%,100%{transform:scaleY(.45);opacity:.65}
  50%{transform:scaleY(1);opacity:1}
}

/* Wide/2K layouts: use five or six cards per row so artwork stays compact and the hub uses space efficiently. */
@container vecmain (min-width:1320px){
  .vocab-image-wrap{aspect-ratio:16/9}
  .vocab-card-copy{padding:14px 14px 13px!important}
  .vocab-card-copy h3{font-size:17px}
  .vocab-card-copy .vocab-meaning{font-size:13px}
  .vocab-status-actions{gap:6px;padding-top:11px}
}
@container vecmain (min-width:1600px){
  .vocab-card-copy{padding:13px 13px 12px!important}
  .vocab-card-copy h3{font-size:16.5px}
  .vocab-card-copy>small,.vocab-card-copy blockquote{font-size:10px}
  .vocab-sound{top:9px;right:9px;min-width:72px;height:36px;padding:0 10px 0 9px}
  .vocab-sound-label{font-size:10px}
}
@media(min-width:1900px){
  .vocab-card-copy{padding:15px 15px 14px!important}
  .vocab-card-copy h3{font-size:17.5px}
}
@media(max-width:680px){
  .vocab-hub-grid{grid-template-columns:1fr!important;gap:12px}
  .vocab-image-wrap{aspect-ratio:16/9}
  .vocab-card-copy{padding:14px!important}
  .vocab-card-copy h3{font-size:17px}
  .vocab-card-copy>small,.vocab-card-copy blockquote{display:block}
  .vocab-sound{min-width:40px;width:40px;padding:0;gap:0}
  .vocab-sound .vocab-sound-label,.vocab-sound .vocab-sound-bars{display:none!important}
  .vocab-sound.playing .vocab-sound-icon{animation:vocabPulse .85s ease-in-out infinite}
}
@keyframes vocabPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@media(prefers-reduced-motion:reduce){
  .vocab-hub-card,.vocab-image-wrap>img,.vocab-sound{transition:none}
  .vocab-sound-bars i,.vocab-sound.playing .vocab-sound-icon{animation:none}
}