:root{
  --navy:#14315f;
  --blue:#1f6feb;
  --gold:#c9902e;
  --ink:#172033;
  --muted:#64748b;
  --line:#dbe5f2;
  --soft:#f4f7fb;
  --white:#fff;
}
*{ box-sizing:border-box; }
body{
  margin:0;
  min-height:100vh;
  font-family:'Kanit',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans Thai',sans-serif;
  color:var(--ink);
  background:
    linear-gradient(180deg, rgba(31,111,235,.09), transparent 420px),
    radial-gradient(780px 420px at 100% 0, rgba(201,144,46,.10), transparent 62%),
    var(--soft);
}
a{ color:inherit; text-decoration:none; }
.topbar{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:76px;
  padding:11px max(16px, calc((100vw - 1180px) / 2));
  background:rgba(255,255,255,.94);
  border-bottom:1px solid rgba(20,49,95,.10);
  backdrop-filter:blur(12px);
}
.brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.brand a{ text-decoration:none; }
.college-logo-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:52px;
  height:52px;
  border:1px solid #e4ebf5;
  border-radius:15px;
  background:#fff;
  box-shadow:0 8px 22px rgba(20,49,95,.08);
}
.college-logo-link img{ width:46px; height:46px; padding:3px; object-fit:contain; }
.brand-main{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.brand-main img{
  width:88px;
  height:46px;
  object-fit:contain;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}
.brand strong,.brand small{ display:block; }
.brand strong{ font-size:1.12rem; color:var(--navy); line-height:1.15; }
.brand small{ color:var(--muted); }
.topbar nav{ display:flex; gap:8px; }
.topbar nav a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:38px;
  padding:7px 12px;
  border-radius:999px;
  color:var(--navy);
  text-decoration:none;
  font-weight:700;
}
.topbar nav a:hover{ background:#eaf2ff; }
.site-footer{
  padding:0 12px 22px;
  color:var(--muted);
}
.site-footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  width:min(1180px, 100%);
  margin:0 auto;
  padding-top:18px;
  border-top:1px solid var(--line);
  font-size:.82rem;
}
.staff-link{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:#7b8799;
  font-size:.78rem;
}
.staff-link:hover{
  color:var(--navy);
  text-decoration:underline;
}
.staff-link:focus-visible{
  border-radius:5px;
  outline:3px solid rgba(31,111,235,.20);
  outline-offset:3px;
}
.wrap{ width:min(1180px, calc(100% - 24px)); margin:0 auto; padding:24px 0 44px; }
.hero{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  min-height:350px;
  padding:42px;
  border-radius:26px;
  color:#fff;
  background:
    radial-gradient(560px 240px at 8% -20%, rgba(255,255,255,.24), transparent 72%),
    radial-gradient(360px 360px at 94% 120%, rgba(201,144,46,.26), transparent 68%),
    linear-gradient(135deg,#102b55 0%,#0d5dc7 72%,#287bd9 100%);
  box-shadow:0 26px 70px rgba(20,49,95,.23);
}
.hero::after{
  content:"";
  position:absolute;
  right:260px;
  bottom:-115px;
  width:270px;
  height:270px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  box-shadow:0 0 0 38px rgba(255,255,255,.035),0 0 0 76px rgba(255,255,255,.025);
  pointer-events:none;
}
.hero-copy{ position:relative; z-index:1; }
.eyebrow{ display:inline-flex; gap:8px; margin-bottom:10px; color:rgba(255,255,255,.84); font-weight:700; }
.hero h1{ margin:0; font-size:clamp(2.6rem, 6vw, 4.8rem); line-height:.98; letter-spacing:-.03em; text-shadow:0 8px 26px rgba(0,0,0,.12); }
.hero p{ max-width:700px; margin:16px 0 0; color:rgba(255,255,255,.88); font-size:1.08rem; line-height:1.75; }
.hero-badges{ display:flex; flex-wrap:wrap; gap:9px; margin-top:22px; }
.hero-badges span{ display:inline-flex; align-items:center; gap:7px; min-height:36px; padding:7px 12px; border:1px solid rgba(255,255,255,.18); border-radius:999px; color:rgba(255,255,255,.92); background:rgba(255,255,255,.10); font-size:.88rem; font-weight:600; }
.progress-card{
  flex:0 0 auto;
  min-width:0;
  padding:16px 18px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:18px;
  background:rgba(255,255,255,.14);
  text-align:center;
}
.hero-side{
  display:grid;
  gap:12px;
  justify-items:stretch;
  position:relative;
  z-index:1;
  flex:0 0 230px;
}
.hero-side > img{
  width:100%;
  max-width:230px;
  border-radius:20px;
  background:#fff;
  padding:12px;
  box-shadow:0 18px 36px rgba(0,0,0,.14);
}
.home-search{
  margin-top:24px;
  padding:22px;
  border:1px solid rgba(20,49,95,.12);
  border-radius:22px;
  background:#fff;
  box-shadow:0 16px 38px rgba(20,49,95,.08);
}
.home-search-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.home-search-head span{ color:var(--blue); font-weight:800; }
.home-search-head h2{ margin:2px 0 0; color:var(--navy); font-size:1.35rem; }
.home-search-head small{ color:var(--muted); }
.home-search-box{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:52px;
  padding:0 15px;
  border:1px solid #b9cbe2;
  border-radius:15px;
  color:var(--blue);
  background:#f8fbff;
}
.home-search-box:focus-within{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(31,111,235,.14); }
.home-search-box input{ padding:0; border:0; outline:0; background:transparent; }
.home-search-results{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:12px;
}
.home-search-results[hidden]{ display:none; }
.home-search-results a{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  min-height:46px;
  padding:8px 11px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}
.home-search-results a:hover{ border-color:#a9c3e8; background:#f3f8ff; }
.home-search-results a b{ color:var(--blue); }
.home-search-results a span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.home-search-results a i{ color:var(--muted); }
.home-search-results p{ grid-column:1/-1; margin:0; padding:12px; color:#9a3412; text-align:center; }
.progress-card span,.progress-card small{ display:block; color:rgba(255,255,255,.82); }
.progress-card strong{ display:block; margin:4px 0; font-size:2rem; }
.toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:18px;
}
.detail-toolbar{
  margin-top:18px;
}
.detail-toolbar .clear-search{
  flex:0 0 auto;
}
.search-empty{
  margin-top:12px;
  padding:14px;
  border:1px solid #fed7aa;
  border-radius:14px;
  color:#9a3412;
  background:#fff7ed;
  font-weight:700;
  text-align:center;
}
.toolbar label{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  min-height:48px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}
.toolbar input{ width:100%; border:0; outline:0; font:inherit; }
.indicator-block{
  margin-top:22px;
  padding:18px;
  border:1px solid rgba(20,49,95,.10);
  border-radius:22px;
  background:#fff;
  box-shadow:0 18px 46px rgba(20,49,95,.08);
}
.indicator-block.accent{
  background:
    radial-gradient(520px 190px at 100% -30%, rgba(201,144,46,.12), transparent 70%),
    #fff;
}
.indicator-block-head{
  display:grid;
  grid-template-columns:minmax(0, 360px) minmax(0, 1fr);
  gap:18px;
  padding:4px 4px 18px;
  border-bottom:1px solid var(--line);
}
.indicator-block-head span{
  color:var(--gold);
  font-weight:800;
}
.indicator-block-head h2{
  margin:4px 0 6px;
  color:var(--navy);
  font-size:1.55rem;
}
.indicator-block-head p{
  margin:0;
  color:var(--muted);
  line-height:1.65;
}
.sub-indicators{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}
.sub-indicators a{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#f8fbff;
  color:var(--navy);
  font-weight:700;
}
.indicator-card-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:20px;
  margin-top:24px;
}
.main-indicator-card{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:315px;
  padding:28px;
  border:1px solid rgba(20,49,95,.10);
  border-radius:24px;
  background:#fff;
  box-shadow:0 18px 46px rgba(20,49,95,.08);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.main-indicator-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:linear-gradient(180deg,var(--blue),var(--navy));
}
.main-indicator-card.accent::before{ background:linear-gradient(180deg,#e2aa48,var(--gold)); }
.main-indicator-card:hover{
  transform:translateY(-3px);
  border-color:#b8c8dd;
  box-shadow:0 24px 56px rgba(20,49,95,.13);
}
.main-indicator-card.accent{
  background:
    radial-gradient(520px 190px at 100% -30%, rgba(201,144,46,.13), transparent 70%),
    #fff;
}
.main-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:62px;
  height:62px;
  border-radius:18px;
  color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--navy));
  font-size:1.8rem;
  box-shadow:0 14px 28px rgba(31,111,235,.22);
}
.main-indicator-card.accent .main-icon{ background:linear-gradient(135deg,#dfa53d,#986312); box-shadow:0 14px 28px rgba(201,144,46,.22); }
.main-label{
  margin-top:18px;
  color:var(--navy);
  font-weight:800;
}
.main-indicator-card.accent .main-label{
  color:var(--gold);
}
.main-indicator-card strong{
  margin-top:4px;
  color:var(--navy);
  font-size:1.7rem;
  line-height:1.25;
}
.main-summary{
  margin-top:10px;
  color:var(--muted);
  line-height:1.7;
}
.main-progress{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:auto;
  padding-top:22px;
  color:var(--navy);
}
.main-progress b{
  display:grid;
  gap:1px;
  font-size:1.55rem;
}
.main-progress b small{ color:var(--muted); font-size:.72rem; font-weight:600; }
.main-progress em{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-style:normal;
  font-weight:800;
  min-height:42px;
  padding:8px 13px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--navy));
  box-shadow:0 10px 22px rgba(31,111,235,.16);
}
.main-indicator-card.accent .main-progress em{ background:linear-gradient(135deg,#d9a03b,#9d6715); }
.detail-hero{
  padding:24px;
  border:1px solid rgba(20,49,95,.10);
  border-radius:22px;
  background:
    radial-gradient(520px 190px at 100% -35%, rgba(31,111,235,.12), transparent 70%),
    #fff;
  box-shadow:0 18px 46px rgba(20,49,95,.08);
}
.detail-hero .back-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:16px;
  min-height:40px;
  padding:8px 12px;
  border:1px solid #c7d7ee;
  border-radius:999px;
  color:var(--navy);
  background:#fff;
  box-shadow:0 8px 18px rgba(20,49,95,.08);
  font-weight:800;
}
.detail-hero .back-link:hover{
  background:#eaf2ff;
  border-color:#a9c3e8;
}
.detail-hero span{
  display:block;
  color:var(--gold);
  font-weight:800;
}
.detail-hero h1{
  margin:4px 0 8px;
  color:var(--navy);
  font-size:clamp(1.6rem, 4vw, 2.6rem);
}
.detail-hero p{
  margin:0;
  color:var(--muted);
}
.oit-shortcuts{
  position:sticky;
  top:76px;
  z-index:15;
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:12px;
  padding:9px 10px;
  overflow-x:auto;
  border:1px solid rgba(20,49,95,.12);
  border-radius:14px;
  background:rgba(255,255,255,.96);
  box-shadow:0 10px 24px rgba(20,49,95,.10);
  backdrop-filter:blur(10px);
}
.oit-shortcuts span{ flex:0 0 auto; margin-right:3px; color:var(--muted); font-size:.82rem; font-weight:700; }
.oit-shortcuts a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-width:42px;
  min-height:34px;
  padding:5px 8px;
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--navy);
  background:#f8fbff;
  font-size:.82rem;
  font-weight:800;
}
.oit-shortcuts a:hover{ color:#fff; border-color:var(--blue); background:var(--blue); }
.detail-indicator-9 .detail-hero{
  border-color:rgba(31,111,235,.24);
  background:
    radial-gradient(520px 210px at 100% -35%, rgba(31,111,235,.22), transparent 70%),
    linear-gradient(135deg,#edf5ff,#fff);
  box-shadow:0 18px 46px rgba(20,49,95,.12);
}
.detail-indicator-9 .detail-hero > span{ color:var(--blue); }
.detail-indicator-9 .detail-hero .back-link:hover{ border-color:#9fc0ec; background:#eef5ff; }
.detail-indicator-9 .sub-head{ border-color:#c9daf1; background:linear-gradient(135deg,#f1f7ff,#fff); }
.detail-indicator-9 .sub-head > span,
.detail-indicator-9 .code{
  background:linear-gradient(135deg,var(--blue),var(--navy));
  box-shadow:0 10px 20px rgba(31,111,235,.22);
}
.detail-indicator-9 .sub-head small{ color:var(--blue); }
.detail-indicator-9 .oit-card{
  border-color:rgba(31,111,235,.30);
  background:linear-gradient(180deg,#fff,#f3f8ff);
  box-shadow:0 14px 34px rgba(20,68,132,.11);
}
.detail-indicator-9 .oit-card h3{
  color:#0d4386;
  font-weight:700;
}
.detail-indicator-9 .source-count{ color:#174f91; background:#dcecff; }
.detail-indicator-9 .toolbar label:focus-within{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(31,111,235,.14); }
.detail-indicator-9 .continue-indicator{
  border-color:rgba(31,111,235,.30);
  background:linear-gradient(135deg,#edf5ff,#fff);
  box-shadow:0 16px 38px rgba(20,49,95,.10);
}
.detail-indicator-9 .continue-indicator span{ color:var(--blue); }
.detail-indicator-9 .continue-indicator a{
  color:#fff;
  background:linear-gradient(135deg,#d9a03b,#9d6715);
  box-shadow:0 10px 22px rgba(201,144,46,.18);
}
.detail-indicator-10 .detail-hero{
  border-color:rgba(201,144,46,.24);
  background:
    radial-gradient(520px 210px at 100% -35%, rgba(201,144,46,.20), transparent 70%),
    linear-gradient(135deg,#fffaf0,#fff);
  box-shadow:0 18px 46px rgba(112,75,16,.09);
}
.detail-indicator-10 .detail-hero > span{ color:#a46c14; }
.detail-indicator-10 .detail-hero .back-link:hover{ border-color:#e4bd76; background:#fffaf0; }
.detail-indicator-10 .sub-head{ border-color:#ecd7ad; background:linear-gradient(135deg,#fff8e8,#fff); }
.detail-indicator-10 .sub-head > span,
.detail-indicator-10 .code{
  background:linear-gradient(135deg,#dfa53d,#986312);
  box-shadow:0 10px 20px rgba(201,144,46,.20);
}
.detail-indicator-10 .sub-head small{ color:#a46c14; }
.detail-indicator-10 .oit-card{ border-color:rgba(201,144,46,.20); }
.detail-indicator-10 .source-count{ color:#815817; background:#fff4d6; }
.detail-indicator-10 .toolbar label:focus-within{ border-color:#d6a44f; box-shadow:0 0 0 3px rgba(201,144,46,.14); }
.admin-link,.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:46px;
  padding:9px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--navy);
  text-decoration:none;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}
.btn.primary{ border-color:transparent; color:#fff; background:linear-gradient(135deg,var(--blue),var(--navy)); }
.group-section{
  margin-top:18px;
  padding-top:4px;
}
.continue-indicator{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:26px;
  padding:22px;
  border:1px solid rgba(201,144,46,.28);
  border-radius:20px;
  color:var(--navy);
  background:linear-gradient(135deg,#fffaf0,#fff);
  box-shadow:0 16px 38px rgba(112,75,16,.08);
}
.continue-indicator span,.continue-indicator strong,.continue-indicator small{ display:block; }
.continue-indicator span{ color:var(--gold); font-weight:700; }
.continue-indicator strong{ margin-top:3px; font-size:1.15rem; }
.continue-indicator small{ margin-top:3px; color:var(--muted); }
.continue-indicator a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  min-height:46px;
  padding:9px 15px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,#d9a03b,#9d6715);
  font-weight:800;
  box-shadow:0 10px 22px rgba(201,144,46,.18);
}
.continue-indicator.return-home a{
  background:linear-gradient(135deg,var(--blue),var(--navy));
  box-shadow:0 10px 22px rgba(31,111,235,.22);
}
.oit-card[id]{ scroll-margin-top:150px; }
.group-section + .group-section{
  padding-top:20px;
  border-top:1px dashed #d5dfec;
}
.group-section h3{ margin:0 0 12px; font-size:1.18rem; color:var(--navy); }
.sub-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
  padding:12px 14px;
  border:1px solid #dbe5f2;
  border-radius:16px;
  background:linear-gradient(135deg,#f8fbff,#ffffff);
}
.sub-head > span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-width:58px;
  min-height:46px;
  padding:6px 10px;
  border-radius:14px;
  color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--navy));
  font-weight:800;
  font-size:1.05rem;
}
.sub-head small{
  display:block;
  color:var(--gold);
  font-weight:800;
}
.sub-head h2{
  margin:1px 0 0;
  color:var(--navy);
  font-size:1.15rem;
  line-height:1.35;
}
.oit-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
.oit-card{
  display:flex;
  flex-direction:column;
  min-height:210px;
  padding:18px;
  border:1px solid rgba(20,49,95,.11);
  border-radius:18px;
  background:
    linear-gradient(180deg,#fff,#fbfdff);
  box-shadow:0 14px 34px rgba(20,49,95,.075);
}
.oit-head{ display:flex; justify-content:space-between; gap:10px; align-items:center; }
.oit-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  min-width:0;
}
.code{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:6px 12px;
  border-radius:13px;
  background:linear-gradient(135deg,var(--blue),var(--navy));
  color:#fff;
  box-shadow:0 10px 20px rgba(31,111,235,.18);
  font-weight:800;
}
.source-count{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:30px;
  padding:4px 9px;
  border-radius:999px;
  color:#47627f;
  background:#edf4ff;
  font-size:.8rem;
  font-weight:700;
}
.status{
  display:inline-flex;
  gap:6px;
  min-height:28px;
  align-items:center;
  padding:4px 9px;
  border-radius:999px;
  color:#8a5b12;
  background:#fff4d6;
  font-size:.88rem;
  font-weight:700;
}
.status::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:999px;
  background:currentColor;
}
.status.ready{ color:#166534; background:#dcfce7; }
.oit-card h3,
.oit-card h4{ margin:16px 0 8px; color:var(--navy); font-size:1.08rem; line-height:1.45; }
.oit-card p{ margin:0; color:var(--muted); line-height:1.65; }
.actions{
  display:grid;
  gap:8px;
  margin-top:auto;
  padding-top:14px;
}
.actions.multi-source{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
.actions.multi-source .source-empty{
  grid-column:1 / -1;
}
.actions a{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  align-items:center;
  gap:9px;
  min-height:54px;
  padding:9px 10px;
  border:1px solid #dbe7f5;
  border-radius:14px;
  color:var(--navy);
  text-decoration:none;
  font-weight:700;
  background:#fff;
  max-width:100%;
  box-shadow:0 8px 18px rgba(20,49,95,.045);
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.actions a:hover{
  transform:translateY(-1px);
  border-color:#aac4e5;
  background:#f8fbff;
  box-shadow:0 12px 24px rgba(20,49,95,.09);
}
.file-source{
  display:grid;
  min-width:0;
  border:1px solid #dbe7f5;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 8px 18px rgba(20,49,95,.045);
}
.actions .file-source .source-link{
  border:0;
  border-radius:0;
  box-shadow:none;
}
.actions .file-source .file-download{
  display:flex;
  justify-content:center;
  min-height:36px;
  padding:6px 10px;
  border:0;
  border-top:1px solid #dbe7f5;
  border-radius:0;
  color:#166534;
  background:#f0fdf4;
  box-shadow:none;
  font-size:.76rem;
}
.actions .file-source .file-download:hover{
  transform:none;
  color:#fff;
  background:#15803d;
}
.source-copy{
  display:grid;
  min-width:0;
  gap:2px;
  line-height:1.28;
}
.source-copy small{
  display:inline-flex;
  align-items:center;
  justify-self:start;
  color:var(--muted);
  background:#f1f5f9;
  border-radius:999px;
  padding:2px 7px;
  font-size:.7rem;
  font-weight:600;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.source-copy strong{
  min-width:0;
  color:var(--navy);
  font-size:.86rem;
  line-height:1.35;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.source-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:34px;
  height:34px;
  border-radius:11px;
  color:var(--navy);
  background:#eaf2ff;
  font-size:1.1rem;
}
.source-link.site .source-icon,
.source-icon.link{
  color:#075985;
  background:#e0f2fe;
}
.source-link.social .source-icon{
  color:#1d4ed8;
  background:#dbeafe;
}
.source-link.drive .source-icon{
  color:#15803d;
  background:#dcfce7;
}
.source-link.system .source-icon{
  color:#7c3aed;
  background:#ede9fe;
}
.source-link.file .source-icon,
.source-icon.file{
  color:#166534;
  background:#dcfce7;
}
.source-open{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:9px;
  color:#47627f;
  background:#edf4ff;
}
.source-empty{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:54px;
  padding:12px;
  border:1px dashed #cbd5e1;
  border-radius:16px;
  color:var(--muted);
  background:#f8fafc;
  font-weight:700;
}
.source-empty i{
  color:#8a5b12;
}
.preview-open{
  overflow:hidden;
}
.preview-modal{
  position:fixed;
  inset:0;
  z-index:90;
  display:grid;
  place-items:center;
  padding:18px;
}
.preview-modal[hidden]{
  display:none;
}
.preview-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.58);
  backdrop-filter:blur(4px);
}
.preview-panel{
  position:relative;
  display:grid;
  grid-template-rows:auto minmax(0, 1fr) auto;
  width:min(1120px, 100%);
  height:min(86vh, 820px);
  border:1px solid rgba(20,49,95,.12);
  border-radius:18px;
  background:#fff;
  box-shadow:0 26px 80px rgba(15,23,42,.30);
  overflow:hidden;
}
.preview-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(420px 160px at 100% -50%, rgba(31,111,235,.14), transparent 70%),
    #fff;
}
.preview-head small{
  display:block;
  color:var(--gold);
  font-weight:800;
}
.preview-head h2{
  margin:2px 0 0;
  color:var(--navy);
  font-size:1.12rem;
  line-height:1.35;
}
.preview-tools{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
.preview-frame-wrap{
  min-height:0;
  background:#eef3f8;
}
.preview-frame-wrap iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
  background:#fff;
}
.preview-note{
  margin:0;
  padding:10px 14px;
  color:var(--muted);
  background:#f8fafc;
  border-top:1px solid var(--line);
  font-size:.88rem;
}
.login-wrap{ display:grid; place-items:center; min-height:calc(100vh - 86px); }
.login-panel,.edit-panel,.side-panel{
  border:1px solid rgba(20,49,95,.10);
  border-radius:18px;
  background:#fff;
  box-shadow:0 18px 46px rgba(20,49,95,.10);
}
.login-panel{ width:min(430px, 100%); padding:28px; text-align:center; }
.login-panel > img{ width:90px; height:90px; object-fit:contain; }
.login-title{ margin:12px 0 18px; }
.login-title > span{ display:inline-flex; align-items:center; gap:6px; margin-bottom:8px; padding:4px 10px; border:1px solid #cfe0f6; border-radius:999px; color:var(--blue); background:#f1f6ff; font-size:.72rem; font-weight:700; letter-spacing:.02em; }
.login-title h1{ margin:0; color:var(--navy); font-size:1.55rem; line-height:1.35; }
.login-title h1 b{ color:var(--blue); font-weight:800; }
.login-title p{ margin:5px 0 0; color:var(--muted); }
.login-panel form{ text-align:left; }
.login-panel form > .btn{ width:100%; }
.password-field{ position:relative; }
.password-field input{ padding-right:48px; }
.password-field button{ position:absolute; top:50%; right:7px; display:grid; place-items:center; width:36px; height:36px; padding:0; border:0; border-radius:9px; color:#64748b; background:transparent; cursor:pointer; transform:translateY(-50%); font-size:1rem; }
.password-field button:hover{ color:var(--navy); background:#eaf2ff; }
.password-field button:focus-visible{ outline:3px solid rgba(31,111,235,.18); }
form{ display:grid; gap:14px; }
label span{ display:block; margin-bottom:7px; font-weight:700; }
input,textarea{
  width:100%;
  border:1px solid #cbd5e1;
  border-radius:12px;
  padding:11px 12px;
  font:inherit;
}
textarea{ resize:vertical; }
input:focus,textarea:focus{ outline:3px solid rgba(31,111,235,.18); border-color:var(--blue); }
.alert{ margin-bottom:14px; padding:12px 14px; border-radius:12px; font-weight:700; }
.alert.warning{ color:#7c2d12; background:#ffedd5; }
.alert.success{ color:#14532d; background:#dcfce7; }
.admin-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  width:min(1380px, calc(100% - 24px));
  margin:24px auto 0;
  padding:24px 26px;
  border:1px solid rgba(20,49,95,.10);
  border-radius:22px;
  background:
    radial-gradient(520px 190px at 8% -40%, rgba(31,111,235,.13), transparent 70%),
    #fff;
  box-shadow:0 18px 46px rgba(20,49,95,.09);
}
.admin-hero h1{
  margin:4px 0 6px;
  color:var(--navy);
  font-size:clamp(1.45rem, 3vw, 2.2rem);
  line-height:1.2;
}
.admin-hero p{
  margin:0;
  color:var(--muted);
}
.eyebrow.dark{
  color:var(--blue);
}
.admin-summary{
  flex:0 0 auto;
  min-width:170px;
  padding:16px 18px;
  border-radius:18px;
  color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--navy));
  box-shadow:0 14px 32px rgba(31,111,235,.20);
}
.admin-summary span,
.admin-summary small{
  display:block;
  color:rgba(255,255,255,.78);
}
.admin-summary small i{
  margin-right:4px;
}
.admin-summary strong{
  display:block;
  margin:3px 0;
  font-size:2rem;
  line-height:1;
}
.admin-layout{
  display:grid;
  grid-template-columns:360px minmax(0,1fr);
  gap:18px;
  align-items:start;
  width:min(1380px, calc(100% - 24px));
  padding-top:18px;
}
.side-panel{
  position:sticky;
  top:86px;
  padding:16px;
  background:
    linear-gradient(180deg,#fff,#f8fbff);
}
.side-head{ display:flex; justify-content:space-between; gap:10px; margin-bottom:12px; color:var(--navy); }
.side-head strong,.side-head small{ display:block; }
.side-head small{ margin-top:2px; color:var(--muted); font-weight:500; }
.side-head span{ color:var(--muted); }
.admin-menu-tools{ display:grid; gap:8px; margin-bottom:12px; }
.admin-search{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}
.admin-search i{ color:var(--muted); }
.admin-search input{ width:100%; min-width:0; padding:0; border:0; background:transparent; }
.admin-search input:focus{ outline:0; }
.admin-filters{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.admin-filters button{
  padding:7px 5px;
  border:1px solid var(--line);
  border-radius:9px;
  color:var(--muted);
  background:#fff;
  font:inherit;
  font-size:.78rem;
  font-weight:700;
  cursor:pointer;
}
.admin-filters button.active{ color:#fff; border-color:var(--navy); background:var(--navy); }
.oit-menu{
  display:grid;
  gap:8px;
  max-height:calc(100vh - 190px);
  overflow:auto;
  padding-right:4px;
}
.oit-menu a{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 18px;
  align-items:center;
  gap:10px;
  min-height:54px;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--navy);
  text-decoration:none;
  background:#fff;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.oit-menu a:hover{
  transform:translateY(-1px);
  border-color:#b8c8dd;
  background:#f8fbff;
}
.oit-menu a.active{ color:#fff; background:var(--navy); border-color:var(--navy); }
.menu-code{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  border-radius:10px;
  background:#eaf2ff;
  color:var(--navy);
  font-weight:800;
}
.oit-menu a.active .menu-code{
  background:rgba(255,255,255,.16);
  color:#fff;
}
.menu-title{
  overflow:hidden;
  color:inherit;
  font-size:.9rem;
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.logout,.user-manage{ display:flex; gap:8px; margin-top:12px; text-decoration:none; font-weight:700; }
.user-manage{ color:var(--navy); }
.logout{ color:#b91c1c; }
.edit-panel{
  padding:28px;
  background:
    linear-gradient(180deg,#fff,#fbfdff);
}
.edit-title span{ color:var(--gold); font-weight:800; }
.edit-title h1{ margin:4px 0 20px; color:var(--navy); font-size:1.65rem; line-height:1.42; }
.edit-title h1 b{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:54px;
  min-height:42px;
  margin-right:8px;
  border-radius:12px;
  color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--navy));
  font-size:1.2rem;
}
.admin-item-status{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:-10px 0 20px; }
.admin-item-status span{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; font-size:.86rem; }
.admin-item-status span.ready{ color:#166534; background:#dcfce7; }
.admin-item-status span.pending{ color:#9a3412; background:#ffedd5; }
.admin-item-status small{ color:var(--muted); }
.criteria-card{ max-width:860px; margin-bottom:18px; padding:18px; border:1px solid #bfd5f5; border-radius:18px; background:linear-gradient(180deg,#f8fbff,#fff); }
.criteria-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.criteria-head span{ color:var(--blue); font-weight:800; }
.criteria-head h2{ margin:3px 0 0; color:var(--navy); font-size:1.15rem; }
.criteria-head strong{ flex:0 0 auto; padding:7px 11px; border-radius:10px; color:#fff; background:var(--navy); }
.criteria-intro{ margin:12px 0 0; color:var(--muted); }
.criteria-list{ display:grid; gap:8px; margin:14px 0; padding:0; list-style:none; }
.criteria-list li{ display:flex; align-items:flex-start; gap:9px; padding:9px 11px; border:1px solid #e2e8f0; border-radius:11px; background:#fff; line-height:1.5; }
.criteria-list i{ margin-top:3px; color:var(--blue); }
.criteria-meta{ display:grid; gap:7px; padding:12px; border-radius:12px; color:var(--muted); background:#eef5ff; font-size:.9rem; }
.criteria-meta span{ display:flex; align-items:flex-start; gap:7px; }
.criteria-meta b{ color:var(--navy); }
.criteria-meta i{ margin-top:2px; color:var(--blue); }
.criteria-note{ display:block; margin-top:10px; color:var(--muted); }
.edit-panel form{
  max-width:860px;
}
.edit-panel label{
  padding:14px;
  border:1px solid #e2e8f0;
  border-radius:16px;
  background:#fff;
}
.edit-panel label span{
  color:var(--navy);
}
.form-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  max-width:860px;
}
.link-list{
  max-width:860px;
  padding:14px;
  border:1px solid #e2e8f0;
  border-radius:16px;
  background:#fff;
}
.section-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.section-title-row h2{
  margin:0;
  color:var(--navy);
  font-size:1.05rem;
}
.btn.small{
  min-height:36px;
  padding:7px 10px;
  font-size:.92rem;
}
.btn.icon-only{
  flex:0 0 auto;
  width:42px;
  min-height:42px;
  padding:0;
  justify-content:center;
}
.link-rows{
  display:grid;
  gap:10px;
}
.link-row{
  display:grid;
  grid-template-columns:minmax(0, 260px) minmax(0, 1fr) auto;
  gap:10px;
  align-items:end;
}
.link-row label{
  padding:0;
  border:0;
}
.file-list{ margin-top:22px; }
.file-list h2{ font-size:1.1rem; color:var(--navy); }
.muted{ color:var(--muted); }
.file-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-top:8px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}
.file-row a{ color:var(--navy); font-weight:700; text-decoration:none; }
.file-row .danger{ color:#b91c1c; }
.delete-file-form{ display:block !important; }
.danger-link{ padding:7px 9px; border:0; color:#b91c1c; background:transparent; font:inherit; font-weight:700; cursor:pointer; }
.admin-preview{
  width:min(760px,calc(100% - 24px));
  max-height:86vh;
  padding:0;
  border:0;
  border-radius:20px;
  color:var(--text);
  background:#fff;
  box-shadow:0 28px 80px rgba(15,23,42,.28);
}
.admin-preview::backdrop{ background:rgba(15,23,42,.58); backdrop-filter:blur(3px); }
.admin-preview-head{ display:flex; justify-content:space-between; gap:16px; padding:20px 22px; border-bottom:1px solid var(--line); }
.admin-preview-head small{ color:var(--muted); }
.admin-preview-head h2{ margin:4px 0 0; color:var(--navy); font-size:1.25rem; }
.admin-preview-head h2 b{ color:var(--blue); }
.preview-close{ width:38px; height:38px; border:1px solid var(--line); border-radius:10px; color:var(--navy); background:#fff; cursor:pointer; }
.admin-preview-body{ overflow:auto; max-height:56vh; padding:22px; }
.preview-description{ margin:0 0 16px; padding:14px; border-radius:12px; color:var(--muted); background:#f8fafc; white-space:pre-wrap; }
.preview-sources{ display:grid; gap:9px; }
.preview-sources > div{ display:flex; align-items:flex-start; gap:11px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; }
.preview-sources i{ margin-top:2px; color:var(--blue); font-size:1.15rem; }
.preview-sources span,.preview-sources small{ display:block; min-width:0; }
.preview-sources b{ color:var(--navy); }
.preview-sources small{ margin-top:3px; overflow-wrap:anywhere; color:var(--muted); }
.preview-empty{ padding:18px; border:1px dashed #fdba74; border-radius:12px; color:#9a3412; text-align:center; background:#fff7ed; }
.admin-preview-actions{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 22px; border-top:1px solid var(--line); background:#f8fafc; }
.admin-preview-actions small{ color:var(--muted); }
.file-meta{
  display:grid;
  gap:6px;
  flex:1;
  min-width:0;
}
.file-meta small{
  color:var(--muted);
  overflow-wrap:anywhere;
}
.file-meta input{
  width:100%;
  max-width:560px;
  border:1px solid #cbd5e1;
  border-radius:10px;
  padding:9px 10px;
  font:inherit;
}
.users-layout{
  display:grid;
  grid-template-columns:minmax(0, 440px) minmax(0, 1fr);
  gap:18px;
  align-items:start;
  width:min(1180px, calc(100% - 24px));
}
.user-form{
  max-width:none;
}
select{
  width:100%;
  border:1px solid #cbd5e1;
  border-radius:12px;
  padding:11px 12px;
  font:inherit;
  background:#fff;
}
.panel-headline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.panel-headline h2{ margin:0; color:var(--navy); }
.user-list{ display:grid; gap:10px; }
.user-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}
.user-card strong,.user-card span{ display:block; }
.user-card span{ margin-top:3px; color:var(--muted); }
.user-card form{ display:block; }
.btn.danger{
  color:#b91c1c;
  background:#fff;
  border-color:#fecaca;
}
@media (max-width:860px){
  .topbar{ align-items:flex-start; flex-direction:column; }
  .hero,.toolbar,.admin-hero{ align-items:flex-start; flex-direction:column; }
  .hero{ min-height:0; padding:28px 22px; border-radius:22px; }
  .hero::after{ right:-110px; bottom:-145px; }
  .hero h1{ font-size:3rem; }
  .hero p{ font-size:1rem; }
  .home-search{ padding:18px; }
  .home-search-head{ align-items:flex-start; flex-direction:column; }
  .home-search-results{ grid-template-columns:1fr; }
  .oit-shortcuts{ top:128px; }
  .oit-card[id]{ scroll-margin-top:205px; }
  .progress-card,.admin-link,.hero-side{ width:100%; }
  .admin-summary{ width:100%; }
  .hero-side{ flex-basis:auto; }
  .hero-side{ grid-template-columns:minmax(0, 180px) minmax(0,1fr); align-items:stretch; }
  .hero-side > img{ width:100%; max-width:180px; }
  .progress-card{ display:grid; align-content:center; }
  .continue-indicator{ align-items:stretch; flex-direction:column; }
  .continue-indicator a{ justify-content:center; width:100%; }
  .oit-grid,.admin-layout,.users-layout,.indicator-block-head,.sub-indicators,.indicator-card-grid{ grid-template-columns:1fr; }
  .actions.multi-source{ grid-template-columns:1fr; }
  .side-panel{ position:static; }
  .oit-menu{
    grid-template-columns:repeat(4,1fr);
    max-height:none;
    overflow:visible;
    padding-right:0;
  }
  .oit-menu a{
    display:flex;
    justify-content:space-between;
    min-height:40px;
    padding:8px;
  }
  .menu-title{ display:none; }
  .form-actions{ flex-direction:column; }
  .admin-preview-actions{ align-items:stretch; flex-direction:column; }
  .admin-preview-actions .btn{ justify-content:center; width:100%; }
  .preview-modal{ padding:8px; }
  .preview-panel{
    width:100%;
    height:92vh;
    border-radius:14px;
  }
  .preview-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .preview-tools,
  .preview-tools .btn{
    width:100%;
  }
  .link-row{ grid-template-columns:1fr; }
  .link-row .icon-only{
    justify-self:end;
  }
}