:root{
  --bg:#f5f8fc;--ink:#172033;--muted:#64748b;--line:#dfe7f1;--soft:#f7faff;
  --navy:#173b63;--blue:#2f6fed;--sky:#edf4ff;--green:#287a5b;--greenSoft:#edf9f4;
  --yellow:#a86212;--yellowSoft:#fff8e8;--orange:#c65e2b;--orangeSoft:#fff4ed;--red:#b83f4b;
  --shadow:0 16px 44px rgba(23,59,99,.08);--radius:20px;
}
body{background:var(--bg);font-family:Inter,"Segoe UI Variable","Avenir Next",Segoe UI,Arial,sans-serif;letter-spacing:-.005em}
.main{background:linear-gradient(180deg,#fbfdff 0,#f5f8fc 100%)}
.sidebar{width:292px;background:linear-gradient(180deg,#173b63 0%,#102c4c 58%,#0c243f 100%);padding:22px 16px}
.brand{padding:4px 5px 18px;border-bottom:1px solid rgba(255,255,255,.12)}
.brand .logo{width:58px;height:58px;border-radius:17px}
.brand strong{font-size:18px}.brand span{font-size:12px;line-height:1.35}
.nav-group{margin:19px 10px 6px;color:#8fc5ee;font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.nav-btn{min-height:44px;padding:11px 12px;border:1px solid transparent;font-size:13px;line-height:1.25}
.nav-btn:hover{border-color:rgba(255,255,255,.1)}
.nav-btn.active{background:white;color:var(--navy);box-shadow:0 10px 26px rgba(5,24,43,.24)}
.nav-btn.active .ico{background:var(--sky);color:var(--blue)}
.nav-btn .ico{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:rgba(255,255,255,.08);font-size:14px}
.sidebar-note{background:rgba(255,255,255,.06);font-size:12px}
.topbar{height:88px;padding:17px 30px;background:rgba(255,255,255,.94);backdrop-filter:blur(15px)}
.topbar h1{font-size:24px;letter-spacing:-.035em}.topbar p{font-size:13px}
#view{max-width:1380px;padding:30px clamp(18px,3vw,40px) 80px}
.hero{background:radial-gradient(circle at 88% 10%,rgba(47,111,237,.12),transparent 35%),linear-gradient(135deg,#fff 0%,#f2f7ff 100%);border-color:#dce7f5;padding:32px;box-shadow:0 20px 60px rgba(23,59,99,.09)}
.hero h2{font-size:clamp(28px,3vw,40px);letter-spacing:-.045em;line-height:1.08}
.card{border-color:#e1e9f3;box-shadow:var(--shadow)}
.card h3{letter-spacing:-.025em}
.btn{min-height:43px;border-radius:12px;background:var(--blue);box-shadow:0 8px 20px rgba(47,111,237,.2);transition:.18s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(47,111,237,.24)}
.btn.ghost,.btn.soft{box-shadow:none}
.pill{background:var(--sky);border-color:#cfe0ff;color:#2457b8}
.pill.green{background:var(--greenSoft);border-color:#bde6d4;color:var(--green)}
.pill.yellow{background:var(--yellowSoft);border-color:#f0d7a6;color:#8b5510}
.pill.orange{background:var(--orangeSoft);border-color:#f3c6b2;color:#a84b25}
.input,select,textarea{background:white;border-color:#d9e3ef;min-height:46px}
textarea{min-height:150px;padding:15px;line-height:1.62}
.field label{font-size:13px;letter-spacing:-.01em}
.charline{padding:9px 2px 2px;display:grid;grid-template-columns:auto minmax(90px,1fr) auto;gap:10px}
.counter-purpose{grid-column:1/-1;color:#73839a;font-size:12px;line-height:1.45}
.progress{height:10px;border:0;background:#e8eef6}.bar{background:linear-gradient(90deg,#7ba8ff,#2f6fed)}
.helpbox{background:#f8fbff;border-color:#dae6f4}
.notice{background:#effaf5;border-color:#bce4d1;border-left-color:#2d8a66}
.warning{background:#fff9ec;border-color:#efd7a8;border-left-color:#c88723}
.module-title{background:linear-gradient(135deg,#245d9e,#2f6fed)}
.module-form{border-color:#dce7f3}
.content-item{border-color:#dce6f2;box-shadow:0 10px 30px rgba(23,59,99,.06)}
.content-item summary{padding:18px 20px}
.content-item summary::before{background:#edf4ff;color:#2f6fed}
.content-item[open] summary::before{background:#2f6fed}
.mentor-banner{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;margin-bottom:18px;padding:16px 18px;border:1px solid #cfe0ff;border-radius:18px;background:linear-gradient(135deg,#f6f9ff,#edf4ff);color:var(--navy)}
.mentor-avatar{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:var(--navy);color:white;font-weight:900}
.mentor-banner p{margin:4px 0 0;color:#5d7087;font-size:13px;line-height:1.5}
.official-flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:18px}
.official-flow button{min-height:112px;padding:15px;border:1px solid #dbe6f2;border-radius:17px;background:white;text-align:left;color:var(--navy);cursor:pointer;box-shadow:0 10px 25px rgba(23,59,99,.06)}
.official-flow button:hover{border-color:#9ebffc;transform:translateY(-2px)}
.official-flow small{display:block;color:#2f6fed;font-weight:900;text-transform:uppercase;letter-spacing:.07em}.official-flow strong{display:block;margin:10px 0 4px}.official-flow span{font-size:12px;color:#6d7f94;line-height:1.4}
.guide-shell{display:grid;grid-template-columns:minmax(250px,.72fr) minmax(0,1.28fr);gap:18px;align-items:start}
.guide-sticky{position:sticky;top:112px}
.descriptor-plain{padding:18px;border-radius:18px;background:linear-gradient(135deg,#173b63,#245d8e);color:white}
.descriptor-plain h3{color:white}.descriptor-plain p{color:#e5f1fb;line-height:1.6}
.example-initial{background:#fff8ef!important;border-color:#efdbb8!important}.example-strong{background:#eff9f4!important;border-color:#bfe3d2!important}
.component-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.component-card{padding:16px;border:1px solid #dfe8f2;border-radius:16px;background:white}
.component-card .state{display:flex;align-items:center;gap:8px;margin:9px 0}.component-card p{font-size:12px;color:#607389;line-height:1.5}
.state-dot{width:11px;height:11px;border-radius:50%;background:#d9e2ed}.state-dot.clear{background:#2d8a66}.state-dot.partial{background:#dc9b2c}.state-dot.missing{background:#7ba8ff}
.soft-meter{display:grid;grid-template-columns:120px 1fr;gap:22px;align-items:center}
.meter-ring{--pct:0;width:112px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#2f6fed calc(var(--pct)*1%),#e7edf5 0);position:relative}
.meter-ring::before{content:"";position:absolute;inset:11px;border-radius:50%;background:white}.meter-ring strong{position:relative;font-size:24px;color:var(--navy)}
.profile-chip{display:inline-flex;gap:7px;align-items:center;padding:8px 11px;border:1px solid #dbe5f0;border-radius:999px;background:white;color:#526a83;font-size:12px;font-weight:700}
.source-strip{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}.source-strip a{padding:8px 11px;border-radius:10px;background:#edf4ff;color:#2457b8;font-size:12px;font-weight:800}
.task-badge{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:11px;background:#edf4ff;color:#2f6fed;font-size:12px;font-weight:900}
.reflection-ladder{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.reflection-ladder div{padding:14px 12px;border:1px solid #dce6f2;border-radius:15px;background:white}.reflection-ladder b{display:block;color:var(--navy);font-size:12px}.reflection-ladder span{display:block;margin-top:5px;color:#6d7f94;font-size:12px;line-height:1.4}
.feedback-preview{padding:20px;border-radius:18px;background:linear-gradient(135deg,#f1f7ff,#f7fbff);border:1px solid #d5e5f8}.feedback-preview h3{margin-top:0}
@media(max-width:1080px){.official-flow{grid-template-columns:repeat(2,1fr)}.guide-shell{grid-template-columns:1fr}.guide-sticky{position:static}.component-grid{grid-template-columns:repeat(2,1fr)}.reflection-ladder{grid-template-columns:1fr}}
@media(max-width:620px){.official-flow,.component-grid{grid-template-columns:1fr}.soft-meter{grid-template-columns:1fr}.mentor-banner{grid-template-columns:auto 1fr}.mentor-banner .btn{grid-column:1/-1}.topbar{padding:13px 15px}#view{padding:18px 13px 70px}.hero{padding:22px}.example{grid-template-columns:1fr}}