/* TahtaGo v8 — responsive, classroom-first refinements; no additional build step. */
:root{--tg8-text:#172a47;--tg8-blue:#2564d9;--tg8-border:#dfe7f2;--tg8-bg:#f5f8fd}
body{background:var(--tg8-bg);color:var(--tg8-text)}
.site-header{box-shadow:0 2px 16px rgba(24,49,87,.045)}
.nav-inner{max-width:1510px;min-height:82px;gap:18px}
.brand-icon{width:68px;height:56px;border-radius:0;background:none;flex-shrink:0}
.brand-icon img{width:54px;height:54px;object-fit:contain}
.brand-text strong{font-size:23px}
.nav-links{flex:1;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;max-width:850px;background:#f5f8fc;padding:5px;border-radius:15px;border:1px solid #eef1f7}
.nav-links a{display:grid;place-items:center;min-height:38px;text-align:center;font-size:12px;line-height:1.25;padding:8px 5px;color:#536782;border-radius:10px;white-space:normal!important}
.nav-links a:hover{background:white;color:var(--tg8-blue)}
.nav-links a.active{background:white;color:#215ed2;box-shadow:0 2px 10px #1b397316}
.nav-actions{gap:7px}.nav-actions .btn{font-size:12px;padding:10px 12px}
.footer-inner{min-height:88px}.footer p{font-size:12px}
.page-section{padding-top:26px}.page-heading{margin-bottom:22px}.page-heading h1{font-size:clamp(29px,3vw,39px)}
/* Board: keep QR card on RIGHT, not below the document list. */
.board-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,330px)!important;align-items:start;gap:16px}
.board-grid>.panel{min-width:0}
.board-grid .tg8-right-col{min-width:0;position:sticky;top:104px;align-self:start}
.board-grid #board-view{min-height:390px}
.board-grid .placeholder-stage{min-height:390px}
.board-grid .qr-card .panel-body{display:flex;align-items:center;flex-direction:column;text-align:center;gap:10px}
.board-grid .qr-card .qr-host{width:190px;height:190px;padding:7px;margin:3px auto}
.board-grid .qr-card .qr-host svg{display:block;width:100%;height:100%}
.board-grid .qr-card .panel-body h3{font-size:16px;margin:4px 0}
.board-grid .qr-card .panel-body p{margin:0;font-size:13px;line-height:1.5}
.board-grid .qr-card .panel-head{gap:8px}
.tg8-qr-collapse{border:1px solid #dbe6f6;background:white;border-radius:8px;color:#2360cf;font-size:11px;cursor:pointer;padding:7px}
.board-grid .tg8-recent{margin:12px!important;border:1px solid #e4ebf5;box-shadow:none;border-radius:13px;padding:14px!important}
.board-grid .tg8-recent .edu-actions{display:flex;flex-wrap:wrap;gap:7px}
.board-grid .tg8-recent p{font-size:12px}
.board-grid .qr-card.tg8-mini .qr-host{width:98px;height:98px;min-width:98px;margin:0 auto}
.board-grid .qr-card.tg8-mini .panel-body{padding:13px 8px;gap:7px}
.board-grid .qr-card.tg8-mini .panel-body p{display:none}
.board-grid .qr-card.tg8-mini h3{font-size:13px;margin:0}
.board-grid .qr-card.tg8-mini .qr-session{font-size:10px;padding:6px 10px}
.board-grid .qr-card.tg8-mini .tiny-actions{display:flex;flex-wrap:wrap;gap:5px;justify-content:center}
.board-grid .qr-card.tg8-mini .tiny-actions button{font-size:11px;padding:7px}
.board-grid.tg8-playing .tg8-right-col{margin-top:150px;transition:margin-top .2s ease}
/* Classroom and teacher tools */
.tg8-tools-grid,.edu-split.edu-section{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:18px}
.tg8-tools-grid>.edu-pane{min-width:0;min-height:240px;height:100%;position:relative;display:flex;flex-direction:column;gap:10px}
.tg8-tools-grid>.edu-pane>h2,.tg8-tools-grid>.edu-pane>.edu-topline{margin-right:110px}
.tg8-tools-grid>.edu-pane .edu-actions{gap:9px;flex-wrap:wrap}
.tg8-tools-grid #class-timer{font-size:clamp(44px,5vw,85px);line-height:1.2;text-align:center;font-variant-numeric:tabular-nums}
.tg8-expand{position:absolute;right:17px;top:17px;background:#f2f6fd;border:1px solid #dbe5f4;border-radius:9px;font-size:12px;color:#24559b;padding:8px;cursor:pointer;z-index:3}
.edu-pane:fullscreen,.edu-pane.tg8-immersive{display:flex;flex-direction:column;justify-content:flex-start!important;overflow:auto;padding:clamp(20px,5vw,55px);background:#fff;box-sizing:border-box}
.edu-pane:fullscreen h2,.edu-pane.tg8-immersive h2{font-size:clamp(26px,3vw,45px)}
.edu-pane:fullscreen #class-timer,.edu-pane.tg8-immersive #class-timer{font-size:clamp(120px,22vw,300px);margin:auto;line-height:1}
.edu-pane.tg8-immersive{position:fixed!important;inset:0!important;z-index:2500!important;border-radius:0!important;height:100dvh!important;width:100vw!important}
.tg8-classroom{padding-top:34px;padding-bottom:70px}.tg8-page-title{margin-bottom:8px}.tg8-page-title h1{font-size:clamp(32px,3.5vw,47px);letter-spacing:-1.6px;margin:9px 0}
.tg8-sub{max-width:760px;color:#607189;font-size:15px;line-height:1.6;margin:0 0 23px}
.tg8-room-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:18px 0}.tg8-room-grid>.edu-pane{min-width:0}
.tg8-flex{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}.tg8-flex h2{margin:0}
.tg8-tag{font-size:12px;background:#eaf2ff;border:1px solid #d7e5fd;color:#1c55b3;padding:6px 12px;border-radius:60px;font-weight:700}
.tg8-caption{font-size:12px;line-height:1.6;color:#7a8798;margin:14px 0 0}.tg8-caption a{color:#2866db;text-decoration:underline}
.tg8-codeinput{font-size:25px;letter-spacing:5px;font-weight:800;text-transform:uppercase}.tg8-room-code{font-size:clamp(35px,5vw,58px);letter-spacing:5px;color:#1c5ed6;margin:9px 0}
.tg8-list{display:flex;flex-direction:column;gap:12px;margin:12px 0}.tg8-room-row,.tg8-task{padding:15px;border:1px solid #e2e9f4;border-radius:13px;background:#fbfcff;min-width:0}
.tg8-room-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.tg8-room-row small,.tg8-task small{display:block;margin-top:6px;color:#74849b;font-size:12px}
.tg8-task{overflow-wrap:anywhere}.tg8-task p{white-space:pre-line;line-height:1.6;color:#52627a;font-size:14px}
.tg8-note{margin-top:20px;background:#f5f8fe;border:1px solid #e4eefa;padding:16px;border-radius:12px;font-size:13px;color:#556780;line-height:1.6}
.tg8-identity{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;margin:16px 0}
.tg8-att-pic{max-width:100%;max-height:360px;border-radius:12px;margin-top:13px;object-fit:contain}
/* Map controls with true SVG zoom + point-data APIs, not invented global overlay data */
.tg8-atlas-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:5px 0 13px}
.tg8-atlas-actions strong{margin-right:auto;font-size:13px}
.tg8-atlas-actions button,.tg8-atlas-actions select{padding:8px 10px;background:#f5f8ff;border:1px solid #dae5f5;border-radius:9px;color:#2a4f86;font-size:12px;cursor:pointer}
.tg8-atlas-actions select{min-width:175px;max-width:245px}
.tg8-map-data{border:1px solid #d9e6f9;background:#eef5ff;color:#335a89;font-size:13px;padding:11px 14px;border-radius:11px;line-height:1.6;margin:12px 0}
.tg8-map-data small{display:block;font-size:11px;color:#667fa1;margin-top:4px}
.edu-mapwrap{overflow:hidden;position:relative}
.edu-mapwrap svg{transition:transform .13s ease;will-change:transform}
.edu-mapwrap svg.tg8-relief{filter:saturate(.84) sepia(.22) hue-rotate(-14deg) contrast(1.06)}
.edu-mapwrap .country{cursor:pointer}
/* Practical mobile navigation: horizontally scrollable TOP tabs; never cover the page */
@media(max-width:1300px){.nav-inner{gap:10px}.nav-links a{font-size:11px;padding:7px 3px}.nav-actions{display:none}}
@media(max-width:1050px){.site-header .nav-links{display:none}.mobile-nav{position:sticky!important;top:70px!important;bottom:auto!important;z-index:31;display:flex!important;width:100%!important;height:auto!important;justify-content:flex-start!important;gap:4px!important;overflow:auto!important;scrollbar-width:none!important;padding:7px 10px!important;background:rgba(255,255,255,.98)!important;border-bottom:1px solid #e3eaf4!important;box-shadow:0 2px 14px #153e7d0b!important}.mobile-nav>a{min-width:95px;flex:0 0 auto!important;border-radius:10px;padding:7px 8px!important}.mobile-nav svg{width:19px!important;height:19px!important}.mobile-nav span{font-size:10px!important}.phone-route .mobile-nav{top:70px!important}.phone-route .site-header{display:block!important}}
@media(max-width:1000px){.board-grid{grid-template-columns:minmax(0,1fr) 260px!important}.board-grid .qr-card .qr-host{width:145px;height:145px}}
@media(max-width:760px){.board-grid{grid-template-columns:1fr!important}.board-grid .tg8-right-col{position:static;top:auto}.board-grid.tg8-playing .tg8-right-col{margin-top:0}.board-grid .qr-card .qr-host{width:170px;height:170px}.tg8-room-grid,.tg8-identity,.tg8-tools-grid,.edu-split.edu-section{grid-template-columns:1fr}.tg8-tools-grid>.edu-pane{min-height:230px}.tg8-room-row{align-items:flex-start}.tg8-classroom{padding-top:24px}.tg8-atlas-actions strong{width:100%}.tg8-atlas-actions select{width:100%;max-width:none}.phone-page{padding-top:10px}.phone-workspace{padding-bottom:18px}.edu-container{padding-left:16px;padding-right:16px}}
/* Office document previews. Browser rendering approximates Office layout; no upload to third parties. */
.tg8-office{margin-top:18px;padding:18px!important;max-width:100%;min-width:0}
.tg8-office .tg8-flex strong{display:block;font-size:17px;overflow-wrap:anywhere}
.tg8-office-tabs{display:flex;gap:7px;align-items:center;overflow-x:auto;margin:16px 0 8px;border-bottom:1px solid #dce5f3;padding-bottom:8px}
.tg8-office-tabs button{white-space:nowrap;padding:8px 14px;border-radius:9px;background:#eff4fd;border:1px solid #dce6f8;color:#446288;cursor:pointer;font:inherit;font-size:12px}
.tg8-office-tabs button.active{background:#2866db;color:white;border-color:#2866db}
.tg8-office-scroll{overflow:auto;max-height:75vh;min-height:150px;border:1px solid #dce6f2}
.tg8-sheet{border-spacing:0;border-collapse:collapse;background:white;min-width:650px;font-size:13px;table-layout:auto}
.tg8-sheet th,.tg8-sheet td{border:1px solid #d7dde7;padding:5px 9px;white-space:pre-wrap;min-width:100px;max-width:380px;overflow-wrap:anywhere}
.tg8-sheet th{background:#f0f4fa;color:#4d6382;font-size:11px;position:sticky;top:0;z-index:1}
.tg8-sheet tbody th{left:0;min-width:35px;position:sticky;z-index:1}
.tg8-slide-scroller{display:flex;justify-content:center;overflow:auto;background:#e7edf7;border:1px solid #d8e2ee;padding:16px;border-radius:11px}
.tg8-slide{width:100%;max-width:1100px;position:relative;background:white;box-shadow:0 8px 26px #1b35551c;overflow:hidden}
.tg8-slide-element{position:absolute;overflow:hidden;white-space:pre-wrap;line-height:1.24;word-break:break-word;color:#172a47}
.tg8-slide-element img{width:100%;height:100%;object-fit:fill}
.tg8-office-error{border-color:#f0d5c9;background:#fffaf7}
@media(max-width:760px){.tg8-office{padding:10px!important}.tg8-slide-scroller{padding:7px}.tg8-slide-text{font-size:10px!important}}

.board-grid.tg8-scanned .tg8-right-col{margin-top:140px;transition:margin-top .2s ease}
@media(max-width:760px){.board-grid.tg8-scanned .tg8-right-col{margin-top:0}}

.tg8-footer-logo{width:135px;height:38px;object-fit:contain;object-position:left center;margin-right:8px}