/* =========================================================
   TeachLog / Super App UI
   SECTION 1: สี (Theme.php เขียนทับ --sb-primary* ใน <style id="theme-vars">)
   ========================================================= */
:root{
  --sb-primary:#6D28D9;--sb-primary-rgb:109,40,217;--sb-primary-600:#6023BF;--sb-primary-700:#4E1D9C;
  --sb-primary-50:#F5F0FD;--sb-primary-100:#EBE1FB;--sb-primary-200:#D3BFF4;
  --sb-grad-from:#8957E1;--sb-grad-to:#6224C3;
  --sb-bg:#f4f5f7;--sb-card:#fff;--sb-border:#eceef2;--sb-line:#f0f1f4;--sb-text:#1f2937;--sb-muted:#6b7280;
  --sb-teal:#0d9488;--sb-blue:#2563eb;--sb-slate:#475569;--sb-success:#16a34a;--sb-warning:#d97706;--sb-danger:#dc2626;--sb-info:#0284c7;
  --sb-r-card:16px;--sb-r-btn:12px;--sb-r-modal:20px;--sb-r-dd:14px;--sb-r-hero:22px;
  --sb-shadow:0 1px 2px rgba(16,24,40,.04),0 2px 8px rgba(16,24,40,.04);
  --sb-shadow-lift:0 10px 30px rgba(16,24,40,.10);
  --sb-rail:84px;--sb-top:62px;
  --bs-body-font-family:'Sarabun',system-ui,-apple-system,'Segoe UI',sans-serif;
  --bs-body-color:var(--sb-text);--bs-body-bg:var(--sb-bg);
  --bs-primary:var(--sb-primary);--bs-primary-rgb:var(--sb-primary-rgb);
  --bs-link-color:var(--sb-primary);--bs-link-hover-color:var(--sb-primary-700);--bs-link-color-rgb:var(--sb-primary-rgb);
  --bs-border-color:var(--sb-border);
}

/* SECTION 2: พื้นฐาน */
html{font-size:15px}
body{font-family:var(--bs-body-font-family);background:var(--sb-bg);color:var(--sb-text);-webkit-font-smoothing:antialiased}
a{color:var(--sb-primary);text-decoration:none}a:hover{color:var(--sb-primary-700)}
.text-muted{color:var(--sb-muted)!important}
.text-primary{color:var(--sb-primary)!important}
.bg-primary{background:var(--sb-primary)!important}
::selection{background:var(--sb-primary-100)}

/* ปุ่ม / input */
.btn{border-radius:var(--sb-r-btn);font-weight:600;padding:.5rem 1rem;display:inline-flex;align-items:center;justify-content:center;gap:.4rem}
.btn-sm{border-radius:10px;padding:.32rem .7rem;font-size:.86rem}
.btn-lg{border-radius:14px;padding:.72rem 1.3rem}
.btn-primary{--bs-btn-bg:var(--sb-primary);--bs-btn-border-color:var(--sb-primary);--bs-btn-hover-bg:var(--sb-primary-600);--bs-btn-hover-border-color:var(--sb-primary-600);--bs-btn-active-bg:var(--sb-primary-700);--bs-btn-active-border-color:var(--sb-primary-700);--bs-btn-disabled-bg:var(--sb-primary);--bs-btn-disabled-border-color:var(--sb-primary);box-shadow:0 4px 12px rgba(var(--sb-primary-rgb),.25)}
.btn-soft{background:var(--sb-primary-50);color:var(--sb-primary);border:0}.btn-soft:hover,.btn-soft.active{background:var(--sb-primary-100);color:var(--sb-primary-700)}
.btn-light{background:#fff;border:1px solid var(--sb-border);color:var(--sb-text)}.btn-light:hover{background:#f8f9fb;border-color:#e2e5ea}
.btn-outline-primary{--bs-btn-color:var(--sb-primary);--bs-btn-border-color:var(--sb-primary-200);--bs-btn-hover-bg:var(--sb-primary);--bs-btn-hover-border-color:var(--sb-primary)}
.btn-icon{width:38px;height:38px;padding:0;border-radius:12px}
.form-control,.form-select{border-radius:var(--sb-r-btn);border-color:#e3e6eb;padding:.55rem .85rem;background-color:#fff}
.form-control-sm,.form-select-sm{border-radius:10px}
.form-control:focus,.form-select:focus,.form-check-input:focus{border-color:var(--sb-primary-200);box-shadow:0 0 0 .22rem rgba(var(--sb-primary-rgb),.15)}
.form-check-input:checked{background-color:var(--sb-primary);border-color:var(--sb-primary)}
.form-label{font-weight:600;font-size:.9rem;margin-bottom:.35rem}
.form-text{color:var(--sb-muted)}
.input-group-text{border-radius:var(--sb-r-btn);background:#f8f9fb;border-color:#e3e6eb}

/* การ์ด */
.card{border:0;border-radius:var(--sb-r-card);box-shadow:var(--sb-shadow);background:var(--sb-card)}
.card-header{background:transparent;border-bottom:1px solid var(--sb-line);padding:1rem 1.2rem;font-weight:700}
.card-header:first-child{border-radius:var(--sb-r-card) var(--sb-r-card) 0 0}
.card-body{padding:1.2rem}
.card-footer{background:transparent;border-top:1px solid var(--sb-line)}

/* ตาราง */
.table{--bs-table-hover-bg:var(--sb-primary-50);margin-bottom:0;vertical-align:middle}
.table>thead th{font-size:.82rem;color:var(--sb-muted);font-weight:600;background:#fafbfc;border-bottom:1px solid var(--sb-border);white-space:nowrap;padding:.7rem .9rem}
.table>tbody td{padding:.75rem .9rem;border-color:var(--sb-line)}

/* modal / dropdown / alert / pills */
.modal-content{border:0;border-radius:var(--sb-r-modal);box-shadow:var(--sb-shadow-lift)}
.modal-header{border-bottom:1px solid var(--sb-line);padding:1rem 1.3rem}.modal-footer{border-top:1px solid var(--sb-line)}
.dropdown-menu{border:0;border-radius:var(--sb-r-dd);box-shadow:var(--sb-shadow-lift);padding:.45rem}
.dropdown-item{border-radius:10px;padding:.5rem .75rem;display:flex;align-items:center;gap:.55rem}
.dropdown-item:active,.dropdown-item.active{background:var(--sb-primary);}
.alert{border:0;border-radius:14px;display:flex;gap:.6rem;align-items:flex-start}
.alert>.bi{font-size:1.1rem;line-height:1.3}
.nav-pills .nav-link{border-radius:999px;color:var(--sb-muted);font-weight:600;padding:.4rem 1rem}
.nav-pills .nav-link.active{background:var(--sb-primary);color:#fff}
.pagination{--bs-pagination-border-radius:10px;--bs-pagination-active-bg:var(--sb-primary);--bs-pagination-active-border-color:var(--sb-primary);--bs-pagination-color:var(--sb-primary);gap:.25rem}
.pagination .page-link{border-radius:10px!important}
.badge{font-weight:600;border-radius:999px}

/* SECTION 3: โครงหน้า (rail + topbar + content) ห้ามใช้ flex wrapper */
.sb-rail{position:fixed;top:0;left:0;bottom:0;width:var(--sb-rail);background:#fff;border-right:1px solid var(--sb-border);display:flex;flex-direction:column;align-items:center;padding:14px 0 12px;z-index:1030}
.sb-logo{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,var(--sb-grad-from),var(--sb-grad-to));color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.35rem;box-shadow:0 6px 16px rgba(var(--sb-primary-rgb),.35);margin-bottom:18px;overflow:hidden}
.sb-logo img{width:100%;height:100%;object-fit:contain;background:#fff;padding:3px}
.sb-rail-nav{display:flex;flex-direction:column;gap:6px;flex:1;width:100%;align-items:center;overflow-y:auto;scrollbar-width:none}
.sb-rail-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--sb-muted);width:72px;padding:4px 0;border-radius:14px}
.sb-rail-item .ico{width:44px;height:36px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;transition:.15s}
.sb-rail-item .lbl{font-size:10.5px;font-weight:600;line-height:1.15;text-align:center;max-width:72px}
.sb-rail-item:hover{color:var(--sb-primary)}.sb-rail-item:hover .ico{background:#f5f6f8}
.sb-rail-item.active{color:var(--sb-primary)}.sb-rail-item.active .ico{background:var(--sb-primary-50);color:var(--sb-primary)}
.sb-rail-item .dot{position:absolute;top:2px;right:12px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--sb-danger);color:#fff;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid #fff}
.sb-rail-bottom{display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:8px;border-top:1px solid var(--sb-line);width:60px}
.sb-main{margin-left:var(--sb-rail);min-height:100vh;box-sizing:border-box}
.sb-topbar{position:sticky;top:0;z-index:1020;height:var(--sb-top);background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--sb-border);display:flex;align-items:center;gap:12px;padding:0 1.6rem}
.sb-org{min-width:0;flex:1}
.sb-org .name{font-weight:700;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-org .sub{font-size:.78rem;color:var(--sb-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-search-btn{display:flex;align-items:center;gap:.5rem;background:#f4f5f7;border:1px solid var(--sb-border);color:var(--sb-muted);border-radius:999px;padding:.42rem .9rem;min-width:240px;font-size:.88rem}
.sb-search-btn kbd{margin-left:auto;background:#fff;color:var(--sb-muted);border:1px solid var(--sb-border);font-size:.7rem;padding:1px 6px;border-radius:6px}
.sb-icon-btn{position:relative;width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--sb-slate);background:transparent;border:0;font-size:1.15rem}
.sb-icon-btn:hover{background:#f4f5f7;color:var(--sb-primary)}
.sb-icon-btn .red-dot{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--sb-danger);border:2px solid #fff}
.sb-profile{display:flex;align-items:center;gap:.55rem;background:transparent;border:0;padding:.25rem .35rem;border-radius:14px}
.sb-profile:hover{background:#f4f5f7}
.sb-profile .who{text-align:left;line-height:1.2}.sb-profile .who b{font-size:.88rem;display:block;max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sb-profile .who small{color:var(--sb-muted);font-size:.74rem}
.sb-content{padding:1.4rem 1.6rem 2rem;width:auto;box-sizing:border-box}
.sb-footer{padding:.8rem 1.6rem 1.4rem;color:#9ca3af;font-size:.8rem}

/* avatar */
.avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--sb-grad-from),var(--sb-grad-to));color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;flex:0 0 auto;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar-xs{width:26px;height:26px;font-size:.75rem}.avatar-sm{width:32px;height:32px;font-size:.85rem}.avatar-lg{width:52px;height:52px;font-size:1.2rem}.avatar-xl{width:76px;height:76px;font-size:1.8rem}

/* SECTION 4: องค์ประกอบ */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.2rem;flex-wrap:wrap}
.page-head h1{font-size:1.55rem;font-weight:700;letter-spacing:-.02em;margin:0}
.page-head .sub{color:var(--sb-muted);margin-top:.2rem}
.page-head .actions{display:flex;gap:.5rem;flex-wrap:wrap}

.section-hero{position:relative;overflow:hidden;border-radius:var(--sb-r-hero);padding:1.8rem 2rem;color:#fff;background:linear-gradient(120deg,#263451 0%,#493b69 55%,#75446a 100%);margin-bottom:1.3rem;min-height:160px}
.section-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1px);background-size:18px 18px;opacity:.6;pointer-events:none}
.section-hero .eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;font-weight:700;opacity:.75;margin-bottom:.4rem}
.section-hero h1,.section-hero h2{font-size:1.75rem;font-weight:700;letter-spacing:-.02em;margin:0 0 .35rem;line-height:1.25}
.section-hero p{opacity:.82;margin:0;max-width:560px}
.section-hero .hero-body{position:relative;z-index:1;max-width:62%}
.section-hero .hero-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.section-hero .hero-art{position:absolute;right:1.4rem;bottom:0;height:92%;max-width:36%;object-fit:contain;filter:drop-shadow(0 12px 24px rgba(0,0,0,.25));z-index:1}
.section-hero .btn-light{background:rgba(255,255,255,.95);border:0}
.section-hero .btn-ghost{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.25)}.section-hero .btn-ghost:hover{background:rgba(255,255,255,.22);color:#fff}

.stat{display:flex;align-items:center;gap:.9rem}
.stat .ico{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex:0 0 auto}
.stat .num{font-size:1.5rem;font-weight:700;line-height:1.1}
.stat .lbl{color:var(--sb-muted);font-size:.85rem}
.tint-primary{background:var(--sb-primary-50);color:var(--sb-primary)}
.tint-success{background:#ecfdf3;color:var(--sb-success)}.tint-warning{background:#fffbeb;color:var(--sb-warning)}
.tint-danger{background:#fef2f2;color:var(--sb-danger)}.tint-info{background:#f0f9ff;color:var(--sb-info)}
.tint-purple{background:#f5f3ff;color:#7c3aed}.tint-blue{background:#eff6ff;color:var(--sb-blue)}.tint-teal{background:#f0fdfa;color:var(--sb-teal)}.tint-slate{background:#f1f5f9;color:var(--sb-slate)}

.app-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:1rem .6rem}
.app-tile{display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--sb-text);text-align:center;padding:.4rem .2rem;border-radius:16px;transition:transform .15s}
.app-tile:hover{transform:translateY(-2px);color:var(--sb-primary)}
.app-ico{position:relative;width:56px;height:56px;border-radius:17px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:#fff;box-shadow:0 6px 14px rgba(16,24,40,.12)}
.app-ico.primary{background:linear-gradient(135deg,var(--sb-grad-from),var(--sb-grad-to))}
.app-ico.teal{background:linear-gradient(135deg,#2dd4bf,#0f766e)}
.app-ico.blue{background:linear-gradient(135deg,#60a5fa,#1d4ed8)}
.app-ico.slate{background:linear-gradient(135deg,#94a3b8,#334155)}
.app-ico .badge-dot{position:absolute;top:-5px;right:-6px;min-width:20px;height:20px;border-radius:999px;background:var(--sb-danger);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px;border:2px solid #fff}
.app-tile .lbl{font-size:.84rem;font-weight:600;line-height:1.25}

.empty{text-align:center;padding:2.2rem 1rem;color:var(--sb-muted)}
.empty .ico{width:64px;height:64px;border-radius:20px;background:var(--sb-primary-50);color:var(--sb-primary);display:inline-flex;align-items:center;justify-content:center;font-size:1.7rem;margin-bottom:.8rem}
.empty h3{font-size:1.05rem;color:var(--sb-text);font-weight:700;margin-bottom:.25rem}

.task-row{display:flex;align-items:center;gap:.8rem;padding:.75rem .2rem;border-bottom:1px solid var(--sb-line);color:var(--sb-text)}
.task-row:last-child{border-bottom:0}.task-row:hover{color:var(--sb-primary)}
.task-row .ico{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--sb-primary-50);color:var(--sb-primary);font-size:1.1rem;flex:0 0 auto}
.task-row small{color:var(--sb-muted);display:block}

.chip{display:inline-flex;align-items:center;gap:.3rem;padding:.22rem .7rem;border-radius:999px;font-size:.8rem;font-weight:600;background:#f1f5f9;color:var(--sb-slate)}

/* ป้ายสถานะ (สีแตกต่างกันทุกสถานะ) */
.st{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .65rem;border-radius:999px;font-size:.78rem;font-weight:700;white-space:nowrap}
.st::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.st-none{background:#f1f5f9;color:#64748b}.st-missing{background:#fef2f2;color:#dc2626}
.st-draft{background:#fffbeb;color:#b45309}.st-recorded{background:#eff6ff;color:#1d4ed8}
.st-submitted{background:#eef2ff;color:#4338ca}.st-returned{background:#fff7ed;color:#c2410c}
.st-approved{background:#ecfdf3;color:#15803d}.st-not_taught{background:#ecfeff;color:#0e7490}

/* ค้นหา Ctrl K */
.cmdk .modal-dialog{max-width:620px;margin-top:10vh}
.cmdk .search-input{border:0;font-size:1.05rem;padding:1rem 1.2rem 1rem 3rem;border-radius:var(--sb-r-modal) var(--sb-r-modal) 0 0;border-bottom:1px solid var(--sb-line)}
.cmdk .search-input:focus{box-shadow:none}
.cmdk .search-wrap{position:relative}.cmdk .search-wrap .bi-search{position:absolute;left:1.15rem;top:1.05rem;color:var(--sb-muted)}
.cmdk .results{max-height:52vh;overflow:auto;padding:.5rem}
.cmdk .result{display:flex;align-items:center;gap:.75rem;padding:.6rem .7rem;border-radius:12px;color:var(--sb-text)}
.cmdk .result .ri{width:34px;height:34px;border-radius:10px;background:var(--sb-primary-50);color:var(--sb-primary);display:flex;align-items:center;justify-content:center}
.cmdk .result.on,.cmdk .result:hover{background:var(--sb-primary-50)}
.cmdk .result small{margin-left:auto;color:var(--sb-muted)}

/* toast / flash */
.sb-flash .alert{box-shadow:var(--sb-shadow)}

/* หน้าตั้งค่า */
.settings-hero{position:relative;overflow:hidden;border-radius:24px;padding:2rem 2.5rem;color:#fff;background:linear-gradient(120deg,#243954 0%,#39445f 50%,#6b4960 100%);margin-bottom:1.6rem;min-height:190px}
.settings-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1px);background-size:18px 18px;opacity:.55}
.settings-hero .inner{position:relative;z-index:1;max-width:60%}
.settings-hero .eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;font-weight:700;opacity:.75}
.settings-hero h1{font-size:2rem;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin:.45rem 0 .4rem}
.settings-hero p{opacity:.8;margin:0}
.settings-hero img{position:absolute;right:2rem;bottom:0;width:280px;height:220px;object-fit:contain;filter:drop-shadow(0 12px 24px rgba(0,0,0,.25));z-index:1}
.settings-headrow{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.9rem;flex-wrap:wrap}
.settings-headrow h2{font-size:1.15rem;font-weight:700;margin:0}
.settings-search{position:relative;width:320px;max-width:100%}
.settings-search input{background:#fff;border-radius:12px;padding-left:2.4rem}
.settings-search .bi{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);color:var(--sb-muted)}
.settings-results{display:none;margin-bottom:1rem}.settings-results.show{display:block}
.settings-groups{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-bottom:1.4rem}
.settings-group{display:flex;flex-direction:column;gap:.55rem;background:#fff;border:2px solid transparent;border-radius:18px;padding:1.1rem 1.15rem;box-shadow:var(--sb-shadow);color:var(--sb-text);transition:.15s}
.settings-group:hover,.settings-group.active{border-color:var(--sb-primary);background:var(--sb-primary-50);color:var(--sb-text)}
.settings-group .gi{width:44px;height:44px;border-radius:13px;background:var(--sb-primary-100);color:var(--sb-primary);display:flex;align-items:center;justify-content:center;font-size:1.25rem}
.settings-group b{font-size:1rem}
.settings-group .desc{font-size:.82rem;color:var(--sb-muted);flex:1}
.settings-group .meta{display:flex;justify-content:space-between;align-items:center;font-size:.82rem;color:var(--sb-muted);font-weight:600}
.settings-workspace{background:#fff;border-radius:20px;box-shadow:var(--sb-shadow);padding:1.4rem 1.6rem}
.settings-workspace .ws-eyebrow{font-size:.78rem;color:var(--sb-muted);font-weight:600}
.settings-workspace .ws-title{font-size:1.25rem;font-weight:700;margin:.1rem 0 .9rem}
.settings-subnav{display:flex;gap:.4rem;flex-wrap:wrap;padding-bottom:1rem;margin-bottom:1.3rem;border-bottom:1px solid var(--sb-line)}
.settings-subnav a{border-radius:999px;padding:.42rem 1rem;font-weight:600;color:var(--sb-slate);background:#f4f5f7;display:inline-flex;gap:.4rem;align-items:center}
.settings-subnav a.active{background:var(--sb-primary);color:#fff}
.art-preview{height:210px;background:#edf0f5;border-radius:14px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.art-preview img{width:100%;height:210px;object-fit:contain}
.swatch{width:34px;height:34px;border-radius:10px;border:3px solid #fff;box-shadow:0 0 0 1px var(--sb-border);cursor:pointer}
.swatch.on{box-shadow:0 0 0 2px var(--sb-text)}

/* dropdown ค้นหาได้ */
.tl-select-wrap{position:relative}
.tl-select-input{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right .75rem center;background-size:14px 10px;padding-right:2.2rem}
.tl-select-list{display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:1065;background:#fff;border-radius:14px;box-shadow:var(--sb-shadow-lift);max-height:260px;overflow:auto;padding:.35rem}
.tl-select-wrap.open .tl-select-list{display:block}
.tl-opt{padding:.45rem .7rem;border-radius:10px;cursor:pointer}
.tl-opt:hover,.tl-opt.on{background:var(--sb-primary-50)}
.tl-opt.sel{font-weight:700;color:var(--sb-primary)}
.tl-empty{padding:.6rem .7rem;color:var(--sb-muted);font-size:.9rem}

/* ลายเซ็น */
.sig-pad{width:100%;height:220px;border:2px dashed #d7dbe2;border-radius:14px;background:#fff;touch-action:none;cursor:crosshair}
.sig-box{background:repeating-conic-gradient(#f3f4f6 0% 25%,#fff 0% 50%) 50%/16px 16px;border-radius:14px;padding:1rem;display:flex;align-items:center;justify-content:center;min-height:130px}
.sig-box img{max-height:110px;max-width:100%}

/* SECTION 5: มือถือ */
.sb-bottom-nav{display:none}
@media (max-width:1199.98px){.settings-groups{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:991.98px){
  .sb-rail{display:none}
  .sb-main{margin-left:0;padding-bottom:84px}
  .sb-topbar{padding:0 1rem}
  .sb-search-btn{min-width:0;width:38px;height:38px;padding:0;justify-content:center;border-radius:12px}
  .sb-search-btn span,.sb-search-btn kbd{display:none}
  .sb-profile .who{display:none}
  .sb-content{padding:1rem 1rem 1.5rem}
  .sb-bottom-nav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1030;background:#fff;border-top:1px solid var(--sb-border);padding:6px 6px calc(6px + env(safe-area-inset-bottom));justify-content:space-around;box-shadow:0 -4px 16px rgba(16,24,40,.06)}
  .sb-bottom-nav .slot-empty{flex:1}
  .sb-bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--sb-muted);font-size:10.5px;font-weight:600;padding:4px 0}
  .sb-bottom-nav a .bi{font-size:1.25rem}
  .sb-bottom-nav a.active{color:var(--sb-primary)}
  .sb-bottom-nav a.center .bi{width:48px;height:48px;margin-top:-22px;border-radius:16px;background:linear-gradient(135deg,var(--sb-grad-from),var(--sb-grad-to));color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px rgba(var(--sb-primary-rgb),.4)}
  .section-hero{padding:1.3rem;border-radius:0 0 26px 26px;margin:-1rem -1rem 1rem}
  .section-hero .hero-body{max-width:100%}
  .section-hero .hero-art{height:110px;right:.6rem;opacity:.9}
  .section-hero.has-art .hero-body{max-width:66%}
  .section-hero h1,.section-hero h2{font-size:1.35rem}
  .settings-hero{padding:1.3rem;min-height:0}
  .settings-hero .inner{max-width:68%}
  .settings-hero h1{font-size:1.4rem}
  .settings-hero img{width:110px;height:110px;right:.8rem}
  .settings-search{width:100%}
  .settings-workspace{padding:1.1rem}
  .sb-flash{position:fixed;left:.8rem;right:.8rem;bottom:calc(84px + env(safe-area-inset-bottom));z-index:1080}
  .page-head h1{font-size:1.3rem}
}
@media (max-width:575.98px){.settings-groups{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}.settings-group{padding:.9rem}.settings-group .desc{display:none}}

/* หน้า login */
.auth-wrap{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.auth-art{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--sb-grad-from),var(--sb-primary-700));color:#fff;padding:3rem;display:flex;flex-direction:column;justify-content:space-between}
.auth-art::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);background-size:20px 20px}
.auth-art>*{position:relative}
.auth-art img.art{max-width:80%;max-height:46vh;object-fit:contain;align-self:center;filter:drop-shadow(0 16px 30px rgba(0,0,0,.25))}
.auth-form{display:flex;align-items:center;justify-content:center;padding:2rem 1.2rem;background:#fff}
.auth-card{width:100%;max-width:400px}
@media (max-width:991.98px){.auth-wrap{grid-template-columns:1fr}.auth-art{padding:1.6rem 1.4rem 2.4rem;border-radius:0 0 26px 26px}.auth-art img.art,.auth-art .feature-list{display:none}}

@media print{.sb-rail,.sb-topbar,.sb-bottom-nav,.sb-flash,.no-print{display:none!important}.sb-main{margin-left:0}}

/* SECTION: ตารางสอน */
.tt-wrap{overflow-x:auto;border:1px solid var(--sb-border);border-radius:14px;background:#fff}
.tt-grid{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;min-width:900px}
.tt-grid th,.tt-grid td{border-right:1px solid var(--sb-line);border-bottom:1px solid var(--sb-line);padding:.3rem;vertical-align:top}
.tt-grid tr>*:last-child{border-right:0}.tt-grid tbody tr:last-child>*{border-bottom:0}
.tt-grid thead th{background:#fafbfc;text-align:center;font-weight:600;font-size:.8rem;color:var(--sb-muted);padding:.45rem .2rem}
.tt-grid thead th b{display:block;color:var(--sb-text);font-size:.95rem}
.tt-grid thead th small{font-size:.7rem}
.tt-grid .tt-day{width:84px;background:#fafbfc;font-weight:700;color:var(--sb-text);vertical-align:middle;text-align:center;font-size:.9rem}
.tt-grid .tt-break{width:30px;background:repeating-linear-gradient(45deg,#f6f7f9,#f6f7f9 6px,#fff 6px,#fff 12px);vertical-align:middle;text-align:center}
.tt-grid td.tt-break span{writing-mode:vertical-rl;font-size:.72rem;color:var(--sb-muted)}
.tt-grid td{height:92px}
.tt-empty{position:relative}
.tt-add{position:absolute;inset:4px;border:1.5px dashed transparent;border-radius:10px;background:transparent;color:transparent;font-size:1.2rem;transition:.15s}
.tt-empty:hover .tt-add,.tt-add:focus{border-color:var(--sb-primary-200);color:var(--sb-primary);background:var(--sb-primary-50)}
.tt-cell{padding:.25rem!important}
.tt-slot{display:flex;flex-direction:column;gap:.1rem;width:100%;text-align:left;border:0;border-left:4px solid;border-radius:10px;padding:.4rem .55rem;font-size:.8rem;line-height:1.3;min-height:84px;color:var(--sb-text);margin-bottom:.2rem}
.tt-slot:last-child{margin-bottom:0}
button.tt-slot{cursor:pointer;transition:transform .12s,box-shadow .12s}button.tt-slot:hover{transform:translateY(-1px);box-shadow:var(--sb-shadow-lift)}
.tt-slot.clash{outline:2px solid var(--sb-danger);outline-offset:-2px}
.tt-code{font-weight:700;font-size:.82rem}.tt-code em{font-style:normal;font-weight:600;font-size:.7rem;margin-left:.35rem;padding:0 .4rem;border-radius:999px;background:rgba(255,255,255,.7)}
.tt-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:500}
.tt-meta{display:flex;flex-wrap:wrap;gap:.15rem .6rem;color:#475569;font-size:.76rem;margin-top:auto}.tt-meta i{margin-right:.2rem}
.tt-eff,.tt-time{font-size:.72rem;color:#475569}.tt-eff i{margin-right:.25rem}
.tt-time{font-weight:700;color:var(--sb-text)}
.tc-0{background:#f5f0fd;border-color:#7c3aed}.tc-1{background:#ecfeff;border-color:#0891b2}.tc-2{background:#f0fdf4;border-color:#16a34a}.tc-3{background:#fff7ed;border-color:#ea580c}
.tc-4{background:#eff6ff;border-color:#2563eb}.tc-5{background:#fdf2f8;border-color:#db2777}.tc-6{background:#fefce8;border-color:#ca8a04}.tc-7{background:#f1f5f9;border-color:#475569}
.tt-days{display:flex;flex-direction:column;gap:.8rem}
.tt-dayblock{border:1px solid var(--sb-border);border-radius:14px;padding:.7rem;background:#fff}
.tt-dayhead{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}.tt-dayhead span{color:var(--sb-muted);font-size:.85rem}
.tt-dayblock .tt-slot{min-height:0;margin-bottom:.45rem}
.tt-toolbar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:flex-end;margin-bottom:1rem}
.tt-toolbar .form-label{font-size:.8rem;color:var(--sb-muted);margin-bottom:.2rem}
.tt-legend{display:flex;flex-wrap:wrap;gap:.4rem 1rem;font-size:.8rem;color:var(--sb-muted)}
.week-day{border:1px solid var(--sb-border);border-radius:14px;background:#fff;padding:.7rem;height:100%}
.week-day.today{border-color:var(--sb-primary-200);box-shadow:0 0 0 3px rgba(var(--sb-primary-rgb),.08)}
.week-day h4{font-size:.95rem;font-weight:700;margin:0}.week-day .dt{color:var(--sb-muted);font-size:.8rem}
.ses{display:block;border-radius:10px;padding:.45rem .55rem;margin-top:.45rem;font-size:.8rem;border-left:4px solid}
.ses.holiday{background:#f8fafc!important;border-color:#cbd5e1!important;color:var(--sb-muted)}
.ses b{display:block}
@media (min-width:992px){.week-cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.7rem}}
@media (max-width:991.98px){.week-cols{display:flex;flex-direction:column;gap:.7rem}}
@media print{.tt-wrap{border:0}.tt-grid{min-width:0}}

/* SECTION: บันทึกหลังการสอน */
.rec-stats{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.5rem}
.rec-stat{border-radius:12px;padding:.55rem .7rem;display:flex;flex-direction:column;line-height:1.2}
.rec-stat b{font-size:1.35rem}.rec-stat span{font-size:.78rem;opacity:.9}
.rec-card{display:block;border-radius:12px;padding:.6rem .65rem;margin-top:.55rem;font-size:.82rem;border-left:4px solid;line-height:1.35}
.rec-card.holiday{background:#f8fafc!important;border-color:#cbd5e1!important;color:var(--sb-muted)}
.rec-card b{font-size:.86rem}.rec-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:500}
.rec-actions{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.5rem;align-items:center}
.rec-actions .btn-sm{padding:.22rem .55rem;font-size:.78rem}
@media (max-width:991.98px){.rec-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:575.98px){.rec-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rf-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:1.2rem;align-items:start}
.rf-side{position:sticky;top:calc(var(--sb-top) + 1rem);display:flex;flex-direction:column;gap:1rem}
@media (max-width:1199.98px){.rf-layout{grid-template-columns:minmax(0,1fr)}.rf-side{position:static;order:-1}}
.rf-sec{margin-bottom:1rem}.rf-sec .card-header{display:flex;align-items:center;gap:.5rem}
.rf-sec .card-header .num{width:28px;height:28px;border-radius:9px;background:var(--sb-primary-50);color:var(--sb-primary);display:inline-flex;align-items:center;justify-content:center;font-size:.85rem}
.rf-info dl{display:grid;grid-template-columns:auto 1fr;gap:.25rem .8rem;margin:0;font-size:.88rem}.rf-info dt{color:var(--sb-muted);font-weight:500}.rf-info dd{margin:0;font-weight:600}
.chk-grid{display:flex;flex-wrap:wrap;gap:.45rem}
.chk-pill{position:relative}.chk-pill input{position:absolute;opacity:0;pointer-events:none}
.chk-pill span{display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .8rem;border-radius:999px;border:1.5px solid var(--sb-border);background:#fff;font-size:.88rem;cursor:pointer;transition:.12s;user-select:none}
.chk-pill span::before{content:"";width:16px;height:16px;border-radius:5px;border:1.5px solid #cbd5e1;background:#fff;flex:0 0 auto}
.chk-pill input[type=radio]+span::before{border-radius:50%}
.chk-pill input:checked+span{border-color:var(--sb-primary);background:var(--sb-primary-50);color:var(--sb-primary-700);font-weight:600}
.chk-pill input:checked+span::before{background:var(--sb-primary) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M4 8.5l3 3 5-6'/%3e%3c/svg%3e") center/12px no-repeat;border-color:var(--sb-primary)}
.chk-pill input:focus-visible+span{box-shadow:0 0 0 3px rgba(var(--sb-primary-rgb),.2)}
.is-invalid-group .chk-pill span{border-color:#fca5a5}
.rf-sub{font-weight:700;font-size:.92rem;margin:1rem 0 .5rem}.rf-sub:first-child{margin-top:0}
.pct{font-size:.8rem;color:var(--sb-muted)}
.att-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.8rem}
.att-item{border:1px solid var(--sb-border);border-radius:12px;overflow:hidden;background:#fff}
.att-item img{width:100%;height:120px;object-fit:cover;display:block;background:#f1f5f9}
.att-item .p{padding:.45rem}
.att-item.removing{opacity:.45}
.rf-savebar{display:none}
@media (max-width:1199.98px){
  .rf-savebar{display:flex;position:fixed;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom));z-index:1030;background:rgba(255,255,255,.96);border-top:1px solid var(--sb-border);padding:.6rem 1rem;gap:.5rem;backdrop-filter:blur(8px)}
  .rf-savebar .btn{flex:1}
  .rf-wrap{padding-bottom:4.5rem}
}
@media (min-width:992px) and (max-width:1199.98px){.rf-savebar{left:var(--sb-rail);bottom:0}}
.autosave-note{font-size:.8rem;color:var(--sb-muted)}
.doc-view h3{font-size:1rem;font-weight:700;margin:1.2rem 0 .5rem}.doc-view .val{white-space:pre-line}
.doc-view .kv{display:grid;grid-template-columns:200px 1fr;gap:.3rem 1rem;font-size:.92rem}.doc-view .kv dt{color:var(--sb-muted);font-weight:500}.doc-view .kv dd{margin:0}
@media (max-width:575.98px){.doc-view .kv{grid-template-columns:1fr}.doc-view .kv dd{margin-bottom:.4rem}}
.bar-row{display:flex;align-items:center;gap:.6rem;font-size:.82rem;margin-bottom:.45rem}
.bar-row .lbl{width:120px;flex:0 0 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-row .track{flex:1;height:12px;border-radius:999px;background:#f1f5f9;overflow:hidden;display:flex}
.bar-row .track i{display:block;height:100%}
.bar-row .n{width:56px;text-align:right;color:var(--sb-muted)}
.vbars{display:grid;grid-template-columns:repeat(5,1fr);gap:.8rem;align-items:end;height:170px;padding-top:.5rem}
.vbar{display:flex;flex-direction:column;align-items:center;gap:.3rem;height:100%;justify-content:flex-end;text-decoration:none;color:var(--sb-text)}
.vbar .stack{width:min(44px,100%);display:flex;flex-direction:column-reverse;border-radius:8px;overflow:hidden;background:#f1f5f9;min-height:4px}
.vbar .stack i{display:block}
.vbar small{color:var(--sb-muted);font-size:.75rem}
.legend{display:flex;flex-wrap:wrap;gap:.3rem 1rem;font-size:.78rem;color:var(--sb-muted)}.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:.3rem;vertical-align:-1px}
.card-link-hover{transition:transform .15s,box-shadow .15s}.card-link-hover:hover{transform:translateY(-2px);box-shadow:var(--sb-shadow-lift)}
.notif-item{display:flex;gap:.6rem;white-space:normal;align-items:flex-start;font-size:.88rem}.notif-item i{margin-top:.15rem}

/* SECTION: สายอนุมัติ */
.chain-steps{display:flex;flex-direction:column;gap:.5rem}
.chain-step{display:flex;gap:.6rem;align-items:flex-start;font-size:.88rem}.chain-step small{display:block;color:var(--sb-muted)}
.chain-step .dot{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;background:#f1f5f9;color:#94a3b8}
.chain-step.done .dot{background:#ecfdf3;color:var(--sb-success)}.chain-step.now .dot{background:var(--sb-primary-50);color:var(--sb-primary)}
.hist-row{display:flex;gap:.7rem;padding:.6rem 0;border-top:1px solid var(--sb-line);font-size:.88rem}
.hist-ico{width:30px;height:30px;border-radius:10px;background:#f1f5f9;color:var(--sb-slate);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.hist-ico.ok{background:#ecfdf3;color:var(--sb-success)}.hist-ico.bad{background:#fff7ed;color:#c2410c}
.hist-comment{margin-top:.3rem;padding:.4rem .6rem;border-radius:10px;background:#f8fafc;white-space:pre-line}
.review-panel{border:2px solid var(--sb-primary-200)!important}
.week-list a{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.45rem .6rem;border-radius:10px;color:var(--sb-text);font-size:.86rem}
.week-list a:hover{background:#f8f9fb}.week-list a.active{background:var(--sb-primary-50);font-weight:700}
.week-list small{color:var(--sb-muted);font-size:.74rem}
.wk-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:1.2rem;align-items:start}
@media (max-width:991.98px){.wk-layout{grid-template-columns:minmax(0,1fr)}.wk-side{order:2}}
.wk-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:.4rem}
.wk-chip{display:flex;align-items:center;justify-content:center;height:38px;border-radius:10px;font-weight:700;font-size:.85rem;text-decoration:none}
.wk-chip::before{display:none}.wk-chip.now{outline:2px solid var(--sb-primary);outline-offset:1px}

/* SECTION: ภาพรวมวิทยาลัย */
.ov-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.8rem}
.ov-cards .stat .num{font-size:1.35rem}
.ov-bars{display:flex;gap:6px;align-items:flex-end;height:180px;overflow-x:auto;padding-bottom:2px}
.ov-bars .vbar{flex:1 0 26px;min-width:26px}
.ov-bars .vbar small{white-space:nowrap;font-size:.68rem}
.prog{display:flex;height:8px;border-radius:999px;overflow:hidden;background:#f1f5f9;min-width:80px}.prog i{display:block;height:100%}

/* คู่มือ */
.guide-search{min-width:300px}
.guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
.guide-card{transition:transform .15s,box-shadow .15s}.guide-card:hover{transform:translateY(-2px);box-shadow:var(--sb-shadow-lg,0 10px 30px rgba(16,24,40,.10))}
.guide-card .card-body{display:flex;gap:.8rem;align-items:flex-start;padding:1rem}
.guide-card .ico,.guide-head .ico{width:42px;height:42px;border-radius:12px;background:var(--sb-primary-100);color:var(--sb-primary);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex:0 0 auto}
.guide-card b{display:block;line-height:1.3}.guide-card small{display:block;color:var(--sb-muted,#6b7280);font-size:.8rem;margin-top:.15rem;line-height:1.4}
.guide-steps-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.guide-step-item{display:flex;gap:.7rem;align-items:flex-start;padding:.7rem .8rem;border-radius:12px;background:#fafbfc;color:inherit;border:1px solid #f0f1f4}
.guide-step-item:hover{background:var(--sb-primary-50);border-color:var(--sb-primary-200);color:inherit}
.guide-step-item .n{width:28px;height:28px;border-radius:50%;background:var(--sb-primary);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 auto;font-size:.85rem}
.guide-step-item b{display:block;font-size:.92rem}.guide-step-item small{display:block;color:var(--sb-muted,#6b7280);font-size:.78rem;line-height:1.35}
.guide-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:1.2rem;align-items:start}
.guide-side{position:sticky;top:76px;max-height:calc(100vh - 90px);overflow:auto;padding-right:.3rem}
.gs-cat{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--sb-muted,#6b7280);margin:.9rem 0 .3rem}
.gs-item{display:flex;gap:.5rem;align-items:center;padding:.38rem .6rem;border-radius:10px;color:#374151;font-size:.88rem;line-height:1.3}
.gs-item:hover{background:#fff;color:var(--sb-primary)}.gs-item.active{background:var(--sb-primary-50);color:var(--sb-primary);font-weight:600}
.guide-head{display:flex;gap:.9rem;align-items:flex-start;padding:1.1rem 1.3rem}
.guide-head h1{font-size:1.4rem;font-weight:700;margin:0;letter-spacing:-.01em}.guide-head p{margin:.2rem 0 0;color:var(--sb-muted,#6b7280)}
.guide-body{padding:1.3rem 1.5rem;line-height:1.75;font-size:15.5px}
.guide-body h2{font-size:1.12rem;font-weight:700;margin:1.6rem 0 .6rem;scroll-margin-top:80px}.guide-body h2:first-of-type{margin-top:.4rem}
.guide-body h3{font-size:1rem;font-weight:700;margin:1.1rem 0 .4rem}
.guide-body p{margin:0 0 .8rem}.guide-body ul{padding-left:1.3rem}.guide-body li{margin-bottom:.25rem}
.guide-body table{font-size:.9rem}
.guide-toc{background:#fafbfc;border:1px solid #f0f1f4;border-radius:12px;padding:.8rem 1rem;margin-bottom:1rem;font-size:.9rem}
.guide-toc ol{margin:.3rem 0 0;padding-left:1.2rem;columns:2}
ol.guide-steps{list-style:none;counter-reset:gs;padding-left:0;margin:0 0 1rem}
ol.guide-steps>li{counter-increment:gs;position:relative;padding:0 0 .7rem 2.6rem;min-height:2rem}
ol.guide-steps>li::before{content:counter(gs);position:absolute;left:0;top:.05rem;width:28px;height:28px;border-radius:50%;background:var(--sb-primary-100);color:var(--sb-primary);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:.85rem}
.guide-note{display:flex;gap:.7rem;padding:.75rem 1rem;border-radius:12px;margin:0 0 1rem;font-size:.93rem;line-height:1.6}
.guide-note>i{font-size:1.1rem;margin-top:.1rem}
.guide-note-tip{background:#ecfdf5;color:#065f46}.guide-note-warn{background:#fff7ed;color:#9a3412}.guide-note-info{background:#eff6ff;color:#1e40af}
.guide-path{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.25rem;vertical-align:middle}
.guide-path span{background:var(--sb-primary-50);color:var(--sb-primary-700,var(--sb-primary));border-radius:999px;padding:.05rem .55rem;font-size:.85rem;font-weight:600}
.guide-path i{font-size:.7rem;color:#9ca3af}
kbd.guide-btn{background:#fff;color:#1f2937;border:1px solid #d6d9e0;border-bottom-width:2px;border-radius:7px;padding:.05rem .45rem;font-family:inherit;font-size:.85rem;font-weight:600;white-space:nowrap}
.guide-roles{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;font-size:.88rem;color:var(--sb-muted,#6b7280);margin-bottom:1rem}
.guide-link{font-weight:600;white-space:nowrap}.guide-link i{margin-right:.2rem}
.guide-nav{display:flex;justify-content:space-between;gap:.6rem;background:#fff;padding:1rem 1.3rem}
.guide-nav .btn{display:flex;align-items:center;gap:.6rem;max-width:48%}.guide-nav small{display:block;font-size:.72rem;color:var(--sb-muted,#6b7280);font-weight:400}
@media (max-width:1199.98px){.guide-grid,.guide-steps-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:991.98px){.guide-layout{grid-template-columns:minmax(0,1fr)}.guide-toc ol{columns:1}}
@media (max-width:575.98px){.guide-grid,.guide-steps-row{grid-template-columns:minmax(0,1fr)}.guide-search{min-width:0;width:100%}.guide-body{padding:1rem}.guide-head{padding:1rem}.guide-head h1{font-size:1.2rem}.guide-nav .btn{max-width:50%;font-size:.85rem}}
@media print{.sb-rail,.sb-topbar,.sb-bottom-nav,.guide-side,.guide-toc{display:none!important}.sb-main{margin:0!important}.guide-layout{display:block}.guide-article{box-shadow:none}}