#ahBooking,#ahAdmin{--ink:#211d30;--muted:#746d82;--accent:#6650a6;--wash:#f4f0fa;--line:#e6e0ec;color:var(--ink);font-family:Inter,"Noto Sans TC","Microsoft JhengHei",Arial,sans-serif;line-height:1.65;max-width:1180px;margin:0 auto;padding:32px 24px;box-sizing:border-box;font-size:15px}#ahBooking *,#ahAdmin *{box-sizing:border-box}#ahBooking h1,#ahAdmin h1{font-size:clamp(25px,3.8vw,40px);line-height:1.25;letter-spacing:-.04em;margin:14px 0}#ahBooking h2,#ahAdmin h2{font-size:21px;line-height:1.4;margin:0 0 10px}#ahBooking h3,#ahAdmin h3{font-size:17px;line-height:1.5;margin:8px 0}#ahBooking p,#ahAdmin p{margin:8px 0}#ahBooking button,#ahAdmin button,#ahBooking input,#ahAdmin input,#ahBooking select,#ahAdmin select,#ahBooking textarea,#ahAdmin textarea{font:inherit;max-width:100%}#ahBooking button,#ahAdmin button,.ah-button{border:0;border-radius:8px;padding:11px 17px;min-height:44px;background:var(--ink);color:#fff;cursor:pointer;text-decoration:none;display:inline-flex;justify-content:center;align-items:center;font-weight:650;gap:6px}#ahBooking button:hover,#ahAdmin button:hover{opacity:.86}#ahBooking button:disabled,#ahAdmin button:disabled{opacity:.45;cursor:default}#ahBooking :focus-visible,#ahAdmin :focus-visible{outline:3px solid #a18ace;outline-offset:3px}#ahBooking button.ghost,#ahAdmin button.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}#ahBooking button.accent,#ahAdmin button.accent{background:var(--accent)}#ahBooking button.small,#ahAdmin button.small{font-size:13px;padding:7px 12px;min-height:38px}#ahBooking input,#ahAdmin input,#ahBooking select,#ahAdmin select,#ahBooking textarea,#ahAdmin textarea{display:block;width:100%;min-height:46px;border:1px solid #d8d0e1;border-radius:8px;background:#fff;color:var(--ink);padding:10px 12px;margin:6px 0 0}#ahBooking textarea,#ahAdmin textarea{min-height:90px;resize:vertical}#ahBooking label,#ahAdmin label{display:block;font-size:13px;font-weight:650}#ahBooking .eyebrow,#ahAdmin .eyebrow{font-size:11px;letter-spacing:.16em;font-weight:750;color:var(--accent)}#ahBooking .muted,#ahAdmin .muted{color:var(--muted);font-size:13px}#ahBooking .badge,#ahAdmin .badge{display:inline-block;font-size:11px;font-weight:650;border:1px solid var(--line);padding:3px 8px;border-radius:5px;background:#fff}#ahBooking .badge.purple,#ahAdmin .badge.purple{background:var(--wash);color:#60478e;border-color:#e3daef}#ahBooking .badge.green,#ahAdmin .badge.green{color:#216849;background:#eff7f1;border-color:#d8ebde}#ahBooking .badge.amber,#ahAdmin .badge.amber{color:#926422;background:#fff8ec;border-color:#f1e1c5}#ahBooking .top,#ahAdmin .top{display:flex;align-items:center;justify-content:space-between;gap:18px;border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:24px}#ahBooking .top h1,#ahAdmin .top h1{font-size:26px;margin:5px 0}#ahBooking .hero{background:var(--wash);border:1px solid #e6deef;border-radius:14px;padding:24px;margin-bottom:24px}#ahBooking .hero h2{font-size:24px;margin:8px 0}#ahBooking .panel,#ahAdmin .panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:23px;margin-bottom:18px}#ahBooking .login-intro{padding:12px 12px 12px 0}#ahBooking .login-form{box-shadow:0 12px 48px #37274a09}#ahBooking .login-form label{margin:0 0 16px}#ahBooking .steps{padding:0;list-style:none;margin:24px 0}#ahBooking .steps li{display:flex;gap:13px;margin:15px 0;align-items:center}#ahBooking .steps b{display:inline-flex;align-items:center;justify-content:center;flex:none;background:var(--wash);border:1px solid #e5dcef;width:30px;height:30px;border-radius:50%;font-size:12px;color:var(--accent)}#ahBooking .row,#ahAdmin .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}#ahBooking .fields,#ahAdmin .fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}#ahBooking .toolbar,#ahAdmin .toolbar{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin:18px 0}#ahBooking .toolbar label,#ahAdmin .toolbar label{min-width:160px}#ahBooking .tabs,#ahAdmin .tabs{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}#ahBooking .tabs button,#ahAdmin .tabs button{background:#fff;border:1px solid var(--line);color:var(--muted)}#ahBooking .tabs button.active,#ahAdmin .tabs button.active{background:var(--ink);color:#fff;border-color:var(--ink)}#ahBooking .cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}#ahBooking .lesson{border:1px solid var(--line);border-radius:11px;padding:21px;background:#fff;display:flex;flex-direction:column;gap:6px}#ahBooking .lesson .actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:12px}#ahBooking .time{font-size:16px;font-weight:650;letter-spacing:-.025em}#ahBooking .notice,#ahAdmin .notice{border-left:3px solid #b49bce;background:#f8f5fb;color:#675975;padding:12px 15px;font-size:13px;margin:14px 0}#ahBooking .error,#ahAdmin .error{color:#9f313f;background:#fff1f1;border:1px solid #f1d4d6;border-radius:8px;padding:10px 13px;margin:12px 0;white-space:pre-wrap}#ahBooking .success,#ahAdmin .success{background:#eff8f1;color:#276449;border:1px solid #d4eadb;border-radius:8px;padding:12px 14px;margin:12px 0}#ahBooking .empty,#ahAdmin .empty{border:1px dashed var(--line);border-radius:10px;padding:30px;text-align:center;color:var(--muted)}#ahBooking .foot,#ahAdmin .foot{font-size:11px;color:var(--muted);border-top:1px solid var(--line);margin-top:30px;padding-top:16px}#ahBooking dialog{width:min(550px,calc(100vw - 30px));max-height:90vh;overflow-y:auto;border:1px solid var(--line);border-radius:14px;padding:26px;color:var(--ink);box-shadow:0 20px 90px #29203330}#ahBooking dialog::backdrop{background:#21182d88}#ahBooking dialog .fields{margin:18px 0}#ahBooking .hidden,#ahAdmin .hidden{display:none!important}#ahBooking .player-box{background:#16131c;border-radius:11px;overflow:hidden;position:relative;aspect-ratio:16/9}#ahBooking .player-box iframe{width:100%;height:100%;position:absolute;inset:0;border:0}#ahBooking .watermark{position:absolute;z-index:2;pointer-events:none;top:8%;left:7%;max-width:75%;font-size:clamp(10px,1.7vw,16px);color:#fff;background:#0008;padding:5px 9px;border-radius:4px}#ahBooking .player-box.expanded{position:fixed;inset:0;width:100vw;height:100dvh;z-index:2147483000;aspect-ratio:auto;border-radius:0}#ahBooking .player-box .exit-expand{position:absolute;z-index:5;top:12px;right:12px}#ahBooking .watch-panel{margin-bottom:24px}#ahAdmin{max-width:1400px}#ahAdmin .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:20px 0}#ahAdmin .stat{background:var(--wash);border:1px solid var(--line);border-radius:10px;padding:18px}#ahAdmin .stat strong{display:block;font-size:30px;line-height:1.4}#ahAdmin .scroll{overflow:auto;margin:14px 0}#ahAdmin table{width:100%;border-collapse:collapse;font-size:13px;white-space:nowrap}#ahAdmin th,#ahAdmin td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:top}#ahAdmin th{font-size:11px;color:var(--muted);font-weight:650}#ahAdmin td.wrap{white-space:normal;min-width:180px;max-width:300px}#ahAdmin .grant-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:15px;background:var(--wash);border-radius:9px;max-height:300px;overflow:auto;margin:15px 0}#ahAdmin .grant-list label{display:flex;gap:8px;align-items:center}#ahAdmin input[type=checkbox]{width:17px;min-height:17px;height:17px;margin:0;flex:none}#ahAdmin .wide{grid-column:1/-1}#ahAdmin .login{max-width:440px;margin:50px auto}#ahAdmin .code-area{min-height:160px;font-family:monospace;font-size:12px}#ahAdmin .video-row{display:grid;grid-template-columns:110px 1fr auto;gap:10px;align-items:end;margin:12px 0}#ahBooking .mobile-note{font-size:12px;color:var(--muted)}@media(max-width:700px){#ahBooking,#ahAdmin{padding:22px 14px}#ahBooking .cards{grid-template-columns:1fr}#ahBooking .top,#ahAdmin .top{align-items:start}#ahBooking .top h1,#ahAdmin .top h1{font-size:22px}#ahBooking .hero{padding:19px}#ahBooking .panel,#ahAdmin .panel{padding:18px}#ahBooking .fields,#ahAdmin .fields{grid-template-columns:1fr}#ahBooking .toolbar label{flex:1 1 130px;min-width:120px}#ahAdmin .stats{grid-template-columns:repeat(3,1fr);gap:8px}#ahAdmin .stat{padding:12px;font-size:12px}#ahAdmin .stat strong{font-size:24px}#ahAdmin .grant-list{grid-template-columns:repeat(2,1fr)}#ahAdmin .video-row{grid-template-columns:1fr}#ahBooking dialog{padding:20px}#ahBooking .lesson{padding:18px}#ahBooking .player-box:fullscreen{border-radius:0}}
#ahBooking .top>div,#ahBooking .login-grid>*,#ahBooking .row>div{min-width:0}#ahBooking h1,#ahBooking h2,#ahBooking h3,#ahBooking .muted,#ahBooking .time,#ahBooking .watermark{overflow-wrap:anywhere}#ahBooking .player-box:fullscreen{width:100%;height:100%;aspect-ratio:auto;border-radius:0}@media(max-width:700px){#ahBooking .top{flex-wrap:wrap}#ahBooking input,#ahBooking select,#ahBooking textarea{font-size:16px}}

/* Student layouts follow the Durable column width, not just the browser width.
   Keep query containment on individual non-player surfaces: containing the
   player itself would change the containing block for its fullscreen fallback. */
#ahBooking{display:block;width:100%;max-width:1080px;min-width:0;height:auto;min-height:0;margin:0 auto;padding:18px 16px}
#ahBooking :is(.top,.hero,.panel,.login-intro,.lesson,.toolbar,.tabs,.foot,.notice,.success,.error){min-width:0;max-width:100%}
#ahBooking :is(h1,h2,h3,p,label,button,.badge,.eyebrow,.time,.foot){overflow-wrap:anywhere}
#ahBooking :is(input,select,textarea){min-width:0;font-size:16px}
#ahBooking button{white-space:normal;line-height:1.4;text-align:center}
#ahBooking .top{container:ahStudentTop / inline-size;flex-wrap:wrap;align-items:start;gap:12px;padding-bottom:14px;margin-bottom:18px}
#ahBooking .top>div{flex:1 1 260px}
#ahBooking .top>button{flex:0 1 auto}
#ahBooking .hero{padding:18px;margin-bottom:18px}
#ahBooking .hero h2{font-size:22px}
#ahBooking .panel{padding:20px;margin-bottom:16px}
#ahBooking .login-grid{
 display:flex;
 flex-wrap:wrap;
 align-items:flex-start;
 width:100%;
 min-width:0;
 gap:24px;
 padding:10px 0;
}
#ahBooking .login-grid > *{
 flex:1 1 340px;
 width:100%;
 min-width:0;
 max-width:100%;
}
#ahBooking .login-intro{padding:0}
#ahBooking .login-form{margin:0}
#ahBooking .login-form label{margin-bottom:13px}
#ahBooking .cards{container:ahStudentCards / inline-size;width:100%;min-width:0;grid-template-columns:repeat(auto-fit,minmax(min(100%,350px),1fr));gap:14px}
#ahBooking .lesson{padding:19px}
#ahBooking .lesson .actions{padding-top:10px}
#ahBooking .fields{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:12px}
#ahBooking .tabs{gap:8px;margin:16px 0}
#ahBooking .tabs button{flex:1 1 180px;padding:10px 12px;font-size:14px}
#ahBooking .toolbar{gap:10px;margin:15px 0}
#ahBooking .toolbar label{flex:0 1 180px;min-width:0}
#ahBooking .toolbar>.muted{flex:1 1 220px}
#ahBooking .foot{margin-top:22px;padding-top:13px}
#ahBooking .watch-panel{min-width:0;width:100%;margin-bottom:18px;scroll-margin-top:18px}
#ahBooking .watch-panel>.panel{padding:16px}
#ahBooking .watch-panel>.panel>.row{container:ahStudentWatchBar / inline-size;width:100%;gap:12px;align-items:start;margin-bottom:12px}
#ahBooking .watch-panel>.panel>.row>div:first-child{flex:1 1 230px}
#ahBooking .watch-panel>.panel>.row>div:last-child{flex:1 1 250px;justify-content:flex-end}
#ahBooking .watch-panel h2{font-size:20px;margin:7px 0}
#ahBooking .player-box{width:100%;max-width:100%;min-width:0}
#ahBooking .player-box:not(.expanded):not(:fullscreen){height:auto;min-height:0;aspect-ratio:16/9}
#ahBooking .player-box iframe{display:block;min-width:0;min-height:0;max-width:100%;margin:0;padding:0}
#ahBooking .player-box.expanded,#ahBooking .player-box:fullscreen{max-width:none}
#ahBooking .watermark{max-width:80%;line-height:1.35}
#ahBooking dialog{max-width:calc(100vw - 24px);max-height:90dvh;padding:22px}
@media(max-width:760px){
 #ahBooking .login-intro h1{font-size:30px;margin:10px 0;line-height:1.25}
 #ahBooking .login-intro>h1 br{display:none}
 #ahBooking .login-intro .steps{display:flex;flex-wrap:wrap;gap:8px;margin:13px 0}
 #ahBooking .login-intro .steps li{flex:1 1 160px;gap:8px;margin:0;font-size:12px;line-height:1.5}
 #ahBooking .login-intro .steps b{width:24px;height:24px;font-size:11px}
 #ahBooking .login-intro .mobile-note{margin:5px 0}
 #ahBooking .login-form{padding:18px}
}
@media(max-width:420px){
 #ahBooking .login-intro h1{font-size:27px}
 #ahBooking .login-form{padding:16px}
}
@container ahStudentTop (max-width:520px){
 #ahBooking .top h1{font-size:22px}
 #ahBooking .top .eyebrow{font-size:10px;letter-spacing:.1em}
}
@container ahStudentCards (max-width:680px){
 #ahBooking .lesson{padding:17px}
 #ahBooking .lesson .actions button{flex:1 1 150px}
}
@container ahStudentWatchBar (max-width:500px){
 #ahBooking .watch-panel h2{font-size:18px}
 #ahBooking .watch-panel .row button{font-size:12px;padding:8px 10px}
}

#ahBooking{--studentHeaderOffset:190px;scroll-margin-top:var(--studentHeaderOffset)}
#ahBooking .watch-panel{scroll-margin-top:var(--studentHeaderOffset)}
#ahBooking .steps li>span{min-width:0}
#ahBooking .steps strong{line-height:1.5}
@media(max-width:700px){#ahBooking{--studentHeaderOffset:105px}}

/* Only the observed Durable section that directly hosts this student app. */
.embed-content > #ahBooking{flex:1 1 1080px}
.embed-content:has(> #ahBooking){display:block!important;width:100%;min-width:0}
.container:has(> .embed-content > #ahBooking){padding-block:24px!important}
@media(max-width:700px){
 .container:has(> .embed-content > #ahBooking){padding-block:16px!important}
}
/* Match both Durable canvas layers to the white renewal iframe on portal pages. */
#main-body:has(.embed-content > #ahBooking[data-kind="portal"])
section > .break-word:has(> .container > .embed-content > :is([id^="history-renewal-"],#ahBooking[data-kind="portal"]))
> .pointer-events-none > .absolute{background-color:#fff!important}
#ahBooking .entry-links{display:flex;align-items:center;flex-wrap:wrap;gap:7px 13px;margin-top:20px}
#ahBooking .entry-links>span{flex-basis:100%}
#ahBooking .entry-links a,#ahBooking .entry-switch{font-size:13px;font-weight:650;color:var(--accent);text-decoration:none;overflow-wrap:anywhere}
#ahBooking .entry-links a:hover,#ahBooking .entry-switch:hover{text-decoration:underline}
#ahBooking .toolbar .entry-links{margin:0 0 0 auto}
#ahBooking .online-window{font-size:14px;line-height:1.9}
#ahBooking .online-cards .lesson .actions{padding-top:8px}
#ahBooking .portal-unlock summary{cursor:pointer;color:var(--accent);font-weight:650}
#ahBooking .portal-unlock form{margin-top:12px}
#ahBooking .portal-unlock button{margin-top:12px}
#ahBooking .early-bird{background:var(--wash);padding:14px clamp(10px,2vw,18px)}
#ahBooking .early-bird h2{color:var(--accent);font-size:clamp(18px,3vw,21px);margin-bottom:6px}
#ahBooking .early-bird p{margin:4px 0}
#ahBooking .early-bird dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:10px 0 0}
#ahBooking .early-bird dl>div{min-width:0;padding:5px clamp(4px,1.2vw,10px);border:1px solid var(--line);border-radius:7px;background:#fff;font-size:13px}
#ahBooking .early-bird dd{margin:0;font-weight:650;overflow-wrap:anywhere}
#ahBooking .early-bird [data-status^="eligible"]{color:#216849}
#ahBooking .early-bird [data-status="pending"]{color:#875614}
#ahBooking .early-bird [data-status="unconfigured"]{color:var(--muted)}
#ahBooking .early-bird [data-status="ineligible"]{color:#9f313f}
#ahBooking .early-bird-deadline{display:block;font-size:12px;font-weight:400}
@media(max-width:700px){#ahBooking .toolbar .entry-links{margin:4px 0 0;flex-basis:100%}}
/* Give the active mobile player the full student column; keep login spacing. */
@media(max-width:600px){
 #ahBooking:has(> #ahWatch:not(.hidden)){padding-inline:0}
 #ahBooking .watch-panel>.panel{padding:14px 10px}
}