:root{--ink:#163b39;--text:#284441;--muted:#657b76;--green:#167a68;--pale:#e8f2ed;--line:#d9e4de;--paper:#f5f7f3;--white:#fff;--amber:#926529;--red:#ab423b;--shadow:0 16px 45px #163b3908}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--text);font:15px/1.7 system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif}button,input,textarea,select{font:inherit}button{cursor:pointer;border:1px solid var(--line);border-radius:9px;background:white;color:var(--ink);padding:9px 15px;transition:.15s}button:hover{border-color:var(--green);background:var(--pale)}button:focus-visible,a:focus-visible{outline:3px solid #76bca8;outline-offset:3px}button.primary{background:var(--green);color:white;border-color:var(--green)}button.primary:hover{background:#126352}button.danger{color:var(--red)}button:disabled{opacity:.5;cursor:not-allowed}a{color:var(--green)}h1,h2,h3,p{margin-top:0}h1{font-size:32px;line-height:1.4;letter-spacing:-1px}h2{font-size:21px;line-height:1.5}h3{font-size:17px}small,.muted{color:var(--muted)}.eyebrow{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--green);font-weight:750;margin-bottom:12px}.app-shell{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:100vh}.sidebar{background:#fff;border-right:1px solid var(--line);padding:28px 20px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column}.brand{font-size:19px;font-weight:800;line-height:1.5}.brand small{display:block;font-size:11px;font-weight:400;letter-spacing:2px;margin-top:4px}.sidebar nav{display:grid;gap:7px;margin:35px 0 20px}.sidebar nav button{text-align:left;border:0;background:none;display:flex;gap:12px;align-items:center;padding:12px;font-size:14px}.sidebar nav button.active{background:var(--pale);color:var(--green);font-weight:700}.nav-index{font-size:11px;opacity:.6}.sidebar footer{margin-top:auto;font-size:12px;color:var(--muted)}.topbar{display:flex;gap:12px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:16px 36px;background:#f5f7f3ef}.topbar select{max-width:340px;min-width:120px}.save-status{font-size:12px;color:var(--muted)}.top-actions,.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.main{max-width:1240px;margin:auto;padding:34px 38px 70px}.heading{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:25px}.heading p{color:var(--muted);max-width:700px;margin-bottom:0}.panel{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:25px;margin-bottom:18px;box-shadow:var(--shadow)}.panel:last-child{margin-bottom:0}.panel.tint{background:var(--pale)}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.work-grid{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:22px;align-items:start}.work-grid aside{position:sticky;top:20px}.label{font-size:12px;color:var(--muted);margin-bottom:5px}.stat{font-size:34px;line-height:1.3;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}.stat small{font-size:14px;font-weight:400}.pill{display:inline-flex;align-items:center;font-size:11px;padding:2px 9px;background:var(--pale);color:var(--green);border-radius:30px;white-space:nowrap}.pill.warn{background:#fbefd9;color:var(--amber)}.pill.neutral{background:#edf0ee;color:var(--muted)}.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.section-title h2,.section-title h3{margin:0}.goal-card{border-top:1px solid var(--line);padding:20px 0}.goal-card:first-child{border-top:0;padding-top:0}.goal-card:last-child{padding-bottom:0}.goal-top{display:flex;gap:14px;align-items:flex-start;justify-content:space-between}.goal-top h3{margin-bottom:8px}.meter{height:5px;background:#e8eeea;border-radius:10px;margin:14px 0 6px;overflow:hidden}.meter span{display:block;height:100%;background:var(--green)}.note{border-left:3px solid #8cb9a8;padding:10px 16px;background:#f1f6f2;margin:16px 0;font-size:14px}.note.warn{border-color:#c6934d;background:#fcf5e8}.note.error{border-color:var(--red);background:#fcf0ee}.steps{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:23px}.steps button{font-size:12px;padding:7px 10px}.steps button.active{background:var(--ink);color:white;border-color:var(--ink)}.field{display:block;margin-bottom:16px;font-size:13px;color:var(--ink);font-weight:600}.field-label{display:block}.field input,.field textarea,.field select{display:block;width:100%;margin-top:7px;border:1px solid #ccdcd3;border-radius:8px;background:#fdfefd;padding:10px 12px;color:var(--text);font-size:14px;font-weight:400;min-width:0}input:focus,textarea:focus,select:focus{outline:2px solid #b4daca;border-color:var(--green)}textarea{resize:vertical;min-height:91px;line-height:1.7}.field small{display:block;font-weight:400;margin-top:4px}.check{display:flex;gap:9px;align-items:flex-start;font-size:14px;margin:10px 0}.check input{margin-top:6px;accent-color:var(--green)}.record{border:1px solid var(--line);padding:20px;border-radius:10px;margin:14px 0;background:#fff}.record .grid2{gap:0 20px}.record-title{display:flex;justify-content:space-between;gap:12px;margin-bottom:15px;align-items:center}.record-title h3{margin:0}.empty{text-align:center;padding:38px 20px;color:var(--muted)}.empty h2{color:var(--ink);font-size:20px}.btnbar{display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap;margin-top:22px}.flow-item{display:grid;grid-template-columns:30px 1fr;gap:12px;padding:18px 0;border-bottom:1px solid #cee0d5}.flow-item:last-child{border-bottom:0}.flow-item strong{display:block}.flow-item small{font-size:13px}.flow-num{border:1px solid #a8cabc;border-radius:50%;width:28px;height:28px;text-align:center;line-height:26px;font-size:12px;color:var(--green)}.landing{max-width:1150px;margin:auto;padding:30px 38px}.landing-header{display:flex;justify-content:space-between;gap:20px;align-items:center}.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:75px;align-items:center;padding:72px 0 54px}.hero h1{font-size:49px;line-height:1.4;margin-bottom:25px;letter-spacing:-2px}.hero h1 em{font-style:normal;color:var(--green)}.hero p{color:var(--muted);line-height:1.9;margin-bottom:28px}.hero .panel{padding:30px}.landing-bottom{border-top:1px solid var(--line);padding-top:26px}.landing-bottom h3{margin-bottom:7px}.landing footer{border-top:1px solid var(--line);margin-top:35px;padding:18px 0;font-size:12px;color:var(--muted);display:flex;justify-content:space-between;gap:15px}.badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.badges span{font-size:12px;color:var(--muted)}details{border:1px solid var(--line);border-radius:9px;padding:12px 16px;margin:12px 0;background:#fff}summary{cursor:pointer;font-size:14px;font-weight:600}details .detail{padding-top:15px;color:var(--muted);font-size:14px}ul{padding-left:22px}li{margin:6px 0}.issue{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}.issue:before{content:'○';color:var(--amber)}.issue.ok:before{content:'✓';color:var(--green)}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:13px}th,td{text-align:left;padding:10px;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}th{background:var(--pale)}dialog{border:1px solid var(--line);border-radius:15px;padding:0;max-width:800px;width:calc(100% - 32px);max-height:90vh;color:var(--text);box-shadow:0 24px 90px #12382d30}dialog::backdrop{background:#12382d70}dialog .modal-head{position:sticky;top:0;background:white;border-bottom:1px solid var(--line);padding:17px 24px;display:flex;justify-content:space-between;gap:16px;align-items:center;z-index:2}dialog .modal-head h2{font-size:19px;margin:0}dialog .modal-body{padding:24px;background:var(--paper)}dialog .modal-foot{padding:17px 24px;background:white;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:var(--ink);color:white;border-radius:10px;padding:12px 20px;z-index:20;max-width:90%;font-size:14px}.global-warning{background:#fff0dc;border-bottom:1px solid #d8bb8a;padding:13px 24px;color:#725126;font-size:14px;position:sticky;top:0;z-index:9}.mono{font:12px/1.6 ui-monospace,Consolas,monospace;overflow-wrap:anywhere;white-space:pre-wrap}.full{width:100%}.wrap{white-space:pre-wrap;overflow-wrap:anywhere}.guide h2{margin-top:28px}.guide h2:first-child{margin-top:0}.guide p{color:var(--muted)}.share-preview{background:white;padding:25px}.share-preview h1{font-size:26px}.mobile-nav{display:none}.record-count{font-size:12px;color:var(--muted)}.context{font-size:14px}.library-item h3{margin-bottom:6px}.library-item p{margin-bottom:8px}.file-only{display:none}
@media(max-width:1080px){.app-shell{grid-template-columns:195px minmax(0,1fr)}.main{padding:28px 25px}.topbar{padding:16px 25px}.work-grid{grid-template-columns:1fr}.work-grid aside{position:static}.hero{gap:30px}.hero h1{font-size:42px}.grid3{gap:10px}}
@media(max-width:700px){.app-shell{display:block}.sidebar{height:auto;position:static;padding:15px 18px;border-right:0;border-bottom:1px solid var(--line)}.sidebar .brand{font-size:18px}.sidebar .brand small{display:none}.sidebar nav{display:flex;overflow:auto;margin:12px 0 0;gap:5px}.sidebar nav button{white-space:nowrap;padding:8px 10px;font-size:12px}.nav-index,.sidebar footer{display:none}.topbar{padding:12px 18px;align-items:flex-start;flex-direction:column;gap:8px}.topbar select{max-width:calc(100vw - 38px)}.main{padding:24px 18px 45px}h1{font-size:27px}.heading{gap:10px}.heading .pill{white-space:normal}.grid2,.grid3{grid-template-columns:1fr}.grid3.stats{grid-template-columns:repeat(3,minmax(0,1fr))}.stats .panel{padding:13px 10px}.stat{font-size:25px}.stat small{font-size:11px}.panel{padding:19px}.hero{grid-template-columns:1fr;padding:44px 0 25px;gap:28px}.hero h1{font-size:38px}.landing{padding:22px}.landing-header{align-items:flex-start}.landing-header .row{gap:5px}.landing-header button{font-size:12px;padding:6px 8px}.landing footer{flex-direction:column}.record{padding:16px}.record .grid2{display:block}.steps button{padding:6px 8px}.heading p{font-size:14px}.hero .panel{padding:23px}.grid3 .panel{margin-bottom:0}.btnbar button{font-size:13px}dialog .modal-body{padding:16px}}
@media print{.sidebar,.topbar,.steps,.btnbar,button,.global-warning,.toast{display:none!important}.app-shell{display:block}.main{padding:0}.panel{box-shadow:none;break-inside:avoid}.work-grid{display:block}body{background:white;font-size:11pt}}
.topbar select{font:inherit;font-weight:600;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:7px 30px 7px 10px;background:white}
.grid3>.panel{margin-bottom:0}
@media(max-width:700px){.heading{display:block}.heading>.pill{margin-top:12px}}
.skill-box{border-top:1px solid var(--line);margin-top:16px;padding-top:14px}
.skill-box p{font-size:13px;color:var(--muted);margin-bottom:8px}
.download-link{display:inline-flex;align-items:center;padding:6px 10px;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--ink);text-decoration:none;font-size:12px;line-height:1.4}
.download-link:hover{border-color:var(--green);background:var(--pale)}
.link-button{border:0;background:none;color:var(--green);padding:0;font-size:12px;text-decoration:underline}

/* IDP visual identity: ink blue, warm coral, editorial horizontal navigation. */
:root{--ink:#222541;--text:#363b55;--muted:#73778c;--green:#5052b6;--pale:#f0effa;--line:#dedfeb;--paper:#f7f6f2;--white:#fff;--amber:#906126;--red:#b94352;--shadow:0 5px 18px #24254106}
body{background:var(--paper)}button{border-radius:5px}button.primary{background:#4d4fae;border-color:#4d4fae}button.primary:hover{background:#363882}button:focus-visible,a:focus-visible{outline-color:#a8a6e1}button:hover{background:#f0effa;border-color:#7373c1}input:focus,textarea:focus,select:focus{outline-color:#d4d1f0;border-color:#7373c1}.field input,.field textarea,.field select{border-color:#d5d5e3;background:#fcfcfe;border-radius:5px}.check input{accent-color:#5052b6}
.brand{display:flex;align-items:center;gap:14px;font-size:18px}.brand small{font-size:9px;letter-spacing:1.9px;margin-top:2px}.eyebrow{color:#74729c;letter-spacing:2.4px;font-weight:650}.panel{border-radius:6px;box-shadow:var(--shadow);border-color:#e1e0e9}.panel.tint{background:#efedf7}.note{background:#f0eff8;border-color:#8e89c0}.meter{height:4px;background:#ecebf3}.meter span{background:#7770c3}.pill{border-radius:4px}.pill.warn{background:#fbeae2;color:#a1543d}.record{border-radius:5px;border-color:#deddea}.steps{gap:0;border-bottom:1px solid var(--line);padding-bottom:0}.steps button{border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;padding:12px 18px;color:var(--muted)}.steps button.active{background:transparent;color:#45449e;border-color:#5754b1;font-weight:750}.goal-card{border-color:#e6e4ed}.record-title .pill{background:#eeeaf8}.toast{background:#292b4e;border-radius:5px}dialog{border-radius:8px;box-shadow:0 24px 90px #25254140}dialog::backdrop{background:#20213d70}
.app-shell{display:block}.sidebar{position:static;height:auto;display:grid;grid-template-columns:1fr auto;background:#252744;color:#fff;border:0;padding:20px max(30px,calc((100vw - 1240px)/2));gap:16px 32px}.sidebar .brand{color:#fff}.sidebar .brand small{color:#b4b5d1}.sidebar nav{grid-column:1/-1;grid-row:2;display:flex;gap:6px;margin:0;overflow:auto}.sidebar nav button{color:#c8c9dc;background:transparent;border-radius:5px;font-size:13px;padding:10px 17px;white-space:nowrap}.sidebar nav button.active{background:#f2edeb;color:#373451}.sidebar nav button:hover{background:#414360;color:#fff}.sidebar .nav-index{color:#aaa7d1}.sidebar footer{grid-column:2;grid-row:1;margin:0;display:flex;align-items:center;gap:22px;color:#b9bad1;font-size:11px}.sidebar footer p{margin:0!important;line-height:1.8}.sidebar footer button{background:transparent;border-color:#575973;color:#e8e8f1}.topbar{background:#eeedf3;border-bottom:1px solid #dedde6;padding:15px max(30px,calc((100vw - 1240px)/2));}.topbar select{border:0;background:transparent;padding-left:0}.main{max-width:1300px;padding:35px 30px 65px}.heading h1{font-size:30px;letter-spacing:-.6px}.heading{padding-bottom:24px;border-bottom:1px solid #dedde6}.stats{gap:0;background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden}.stats .panel{border:0;border-right:1px solid var(--line);border-radius:0;box-shadow:none;padding:20px 28px}.stats .panel:last-child{border-right:0}.stat{color:#42418c;font-size:36px}.work-grid{grid-template-columns:minmax(0,1fr) 300px;gap:24px}.work-grid aside{top:22px}.work-grid aside .tint{border-top:4px solid #df9b87;background:#f1edf2}.work-grid aside .eyebrow{color:#8c625d}.section-title{margin-bottom:20px}
.landing{max-width:1210px;padding:28px 35px}.landing-header{padding-bottom:23px;border-bottom:1px solid #dedde6}.hero{display:block;padding:52px 0 30px}.hero>div:first-child{max-width:820px;margin:0 auto;text-align:center}.hero h1{font-size:53px;line-height:1.3;letter-spacing:-1.9px;margin:19px 0 22px}.hero h1 br{display:none}.hero h1 em{display:block;color:#5751a5}.hero p{font-size:16px;line-height:1.9}.hero>div:first-child .row,.badges{justify-content:center}.hero .primary{background:#262845;border-color:#262845;padding:12px 23px}.hero .primary:hover{background:#414368}.badges{margin-top:20px;gap:20px}.badges span{font-size:11px;letter-spacing:1px}.badges span:before{content:'—';color:#d58a74;margin-right:8px}.hero>.panel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#292b4b;color:white;padding:0;margin-top:44px;border:0;border-radius:8px;overflow:hidden;max-width:none}.hero>.panel>.eyebrow{grid-column:1/-1;margin:0;padding:19px 26px;color:#c2bddf;border-bottom:1px solid #4a4b67;font-size:10px}.flow-item{display:block;padding:22px 26px 26px;border:0;border-right:1px solid #4a4b67;position:relative}.flow-item:last-child{border-right:0}.flow-num{display:block;border:0;border-radius:0;width:auto;height:auto;text-align:left;color:#edaa98;font-size:30px;line-height:1;margin-bottom:21px;font-weight:500;font-family:Georgia,serif}.flow-item strong{font-size:16px;letter-spacing:.5px;margin-bottom:6px}.flow-item small{color:#c1bfd5;font-size:12px}.landing-bottom{border:0;gap:32px;padding-top:10px;counter-reset:benefit}.landing-bottom>div{padding:22px 0 0;border-top:2px solid #b9b3d2}.landing-bottom h3{font-size:16px}.landing-bottom p{font-size:13px}.landing footer{margin-top:29px;font-size:11px;padding-top:21px}.landing footer span:first-child{color:#4b4c67}details{border-radius:5px}
@media(max-width:1080px){.sidebar{padding:18px 25px}.sidebar nav{gap:3px}.sidebar nav button{padding:9px 12px}.main{padding:28px 25px}.topbar{padding:14px 25px}.work-grid{grid-template-columns:1fr}.work-grid aside{position:static}.hero h1{font-size:45px}.flow-item{padding:22px 20px}}
@media(max-width:700px){.sidebar{display:flex;flex-wrap:wrap;padding:17px 18px;gap:14px}.sidebar .brand{font-size:16px}.sidebar .brand small{display:block;font-size:8px}.sidebar footer{display:flex;margin-left:auto}.sidebar footer p{display:none}.sidebar footer button{font-size:11px}.sidebar nav{width:100%;order:3;gap:4px}.sidebar nav button{font-size:12px;padding:8px 11px}.sidebar .nav-index{display:none}.topbar{padding:13px 18px}.main{padding:25px 18px 50px}.heading h1{font-size:27px}.heading{padding-bottom:20px}.stats .panel{padding:16px 11px}.stat{font-size:27px}.stats .label{font-size:11px}.steps{flex-wrap:wrap}.steps button{padding:10px 11px}.landing{padding:20px}.landing-header{gap:10px}.landing-header .brand{font-size:15px;gap:9px}.landing-header .brand small{font-size:7px;letter-spacing:1px}.hero{padding:37px 0 23px}.hero h1{font-size:35px;letter-spacing:-1px}.hero p{font-size:14px}.hero p br{display:none}.hero>.panel{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:31px}.hero>.panel>.eyebrow{padding:15px 18px}.flow-item{padding:19px 18px;border-bottom:1px solid #4a4b67}.flow-item:nth-child(3){border-right:0}.flow-item:nth-child(4),.flow-item:nth-child(5){border-bottom:0}.flow-num{font-size:26px;margin-bottom:15px}.flow-item small{font-size:11px}.hero .primary{padding:10px 16px}.landing-bottom{gap:14px}.landing-bottom>div{padding-top:15px}.landing footer{line-height:1.9}.badges{gap:12px}.badges span{font-size:10px}.panel{padding:20px}.record{padding:15px}}
@media print{.sidebar,.topbar{display:none!important}.heading{border-bottom:1px solid #aaa}.panel{box-shadow:none}}

/* Restore a persistent left navigation while retaining the independent IDP palette. */
@media(min-width:701px){
.app-shell{display:grid;grid-template-columns:250px minmax(0,1fr)}
.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;padding:30px 22px;border-right:1px solid #303252}
.sidebar .brand{font-size:17px;line-height:1.6;display:block;white-space:nowrap;padding-bottom:25px;border-bottom:1px solid #464860}
.sidebar nav{display:flex;flex-direction:column;gap:8px;margin:27px 0;overflow:auto;flex:1}
.sidebar nav button{padding:13px 14px;flex-shrink:0;text-align:left;display:flex;gap:12px}
.sidebar footer{display:block;margin-top:auto;padding-top:20px;border-top:1px solid #464860}
.sidebar footer p{margin-top:16px!important;font-size:12px;line-height:1.9}
.topbar{padding:17px 30px}.main{padding:32px 30px 65px}
}
@media(min-width:701px) and (max-width:1100px){.work-grid{grid-template-columns:1fr}.work-grid aside{position:static}}
.landing-header .brand{font-size:20px;font-weight:800;letter-spacing:-.4px}
@media(max-width:700px){.landing-header{flex-wrap:wrap}.landing-header .brand{font-size:19px}.sidebar .brand{font-size:18px;display:block}.sidebar footer{margin-left:auto}}
@media print{.app-shell{display:block}.sidebar{display:none!important}}
.diff-table table{table-layout:fixed;width:100%}.diff-table td{overflow-wrap:anywhere;white-space:pre-wrap}.diff-table th:first-child{width:26%}.diff-table td:first-child{font-size:12px;color:var(--muted)}
.issue button{white-space:nowrap;flex-shrink:0}


/* 1.2.3 — keep the 1.2.1 ink/coral visual; two UI fixes only. */

/* Equal-width hero actions (desktop 172x42, mobile full width). */
.hero .row { gap: 10px; }
.hero .row button,
.hero .row .primary {
  width: 172px;
  min-height: 42px;
  padding: 0 14px;
  font-size: 13px;
}

/* Remove decorative colored bars from cards and notices. */
.note {
  border: 1px solid #d9d8e8;
  border-left: 1px solid #d9d8e8;
  border-radius: 6px;
  background: #f0eff8;
}
.note.warn {
  background: #fcf5e8;
  border-color: #e6cfac;
  color: #7a5a24;
}
.note.error {
  background: #fcf0ee;
  border-color: #e8c4c9;
  color: #8a3a45;
}
.work-grid aside .tint {
  border: 1px solid #e1e0e9;
  border-top: 1px solid #e1e0e9;
  background: #f1edf2;
}
.landing-bottom > div {
  border-top: 0;
  padding-top: 0;
}

@media (max-width: 600px) {
  .hero .row {
    flex-direction: column;
    align-items: stretch;
    max-width: 340px;
    margin: 22px auto 0;
  }
  .hero .row button,
  .hero .row .primary { width: 100%; }
}

/* 1.3.0 — beginner start, this week's one action, quick evidence. */

.hero-alt {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.text-action {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #5751a5;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.text-action:hover {
  border: 0;
  background: none;
  color: #3f3a85;
}

.advanced-line {
  max-width: 820px;
  margin: 28px auto 0;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.quick-start {
  max-width: 820px;
  margin: 0 auto;
  padding: 28px 30px;
}

.quick-progress {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 1px;
}

.quick-start .field { margin-bottom: 18px; }
.quick-check { margin: -4px 0 18px; }

.quick-details {
  margin: 18px 0 0;
  padding: 14px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.quick-details summary {
  color: #5751a5;
  font-size: 13px;
  font-weight: 600;
}

.quick-details-body { padding-top: 14px; }
.quick-actions { margin-top: 20px; }

.focus-card {
  padding: 26px 28px;
  border-color: #d8d7e7;
}

.focus-card h2 {
  margin-bottom: 4px;
  font-size: 22px;
}

.focus-card h3 {
  margin: 18px 0 6px;
  font-size: 24px;
  line-height: 1.4;
}

.focus-card .row { margin-top: 18px; }

.stats-drawer {
  margin: 18px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.stats-drawer summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
}

.stats-drawer .grid3 { margin-top: 14px; }
.stats-drawer .stats {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.stats-drawer .stats .panel {
  border: 0;
  border-right: 1px solid var(--line);
  padding: 12px 18px;
}
.stats-drawer .stats .panel:last-child { border-right: 0; }

@media (max-width: 700px) {
  .quick-start { padding: 20px; }
  .focus-card { padding: 20px; }
  .focus-card h3 { font-size: 20px; }
  .advanced-line { text-align: left; }
  .stats-drawer .stats { grid-template-columns: 1fr; }
  .stats-drawer .stats .panel {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .stats-drawer .stats .panel:last-child { border-bottom: 0; }
}

/* Tertiary actions: same height as normal buttons, distinguished by weight, not size. */
button.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  box-shadow: none;
}
button.ghost:hover {
  background: var(--pale);
  border-color: transparent;
  color: var(--ink);
}
button.ghost.danger { color: var(--red); }
button.ghost.danger:hover { background: #fdf0f1; color: var(--red); }
.sidebar footer button.ghost {
  background: transparent;
  border-color: transparent;
  color: #e8e8f1;
}
.sidebar footer button.ghost:hover {
  background: #414360;
  border-color: transparent;
  color: #fff;
}

/* Keep the weekly action row visually uniform; width comes from the row, not the label. */
.focus-card .row button {
  min-width: 118px;
  text-align: center;
}

@media (max-width: 700px) {
  .focus-card .row button {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* Inline skill action pair: keep the primary link and install help apart. */
.skill-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  vertical-align: middle;
}

/* Read-only filled example inside the four-question starter. */
.quick-example {
  margin: 0 0 20px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f7f6fb;
}
.quick-example summary {
  cursor: pointer;
  color: #5751a5;
  font-size: 13px;
  font-weight: 600;
}
.quick-example-body { padding-top: 10px; }
.example-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid #e5e4ef;
}
.example-row:first-of-type { border-top: 0; }
.example-row > span {
  color: #8c625d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.4;
}
.example-row strong {
  display: block;
  color: var(--ink);
  font-size: 12px;
}
.example-row p {
  margin: 4px 0 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.7;
}

/* Keep both navigation surfaces in view while the plan scrolls. */
@media (min-width: 701px) {
  .sidebar { align-self: start; }
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 8;
  background: #eeedf3;
}

.field-label { cursor: default; }

/* Brand lockup: Chinese name + English studio label, matching sibling tools. */
.brand strong {
  display: block;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}
.brand span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 2.2px;
  text-transform: uppercase;
}
.sidebar .brand span { color: #aaa7d1; }
.landing-header .brand span { color: #74729c; }

.landing-header .brand,
.sidebar .brand {
  display: block;
}

/* Static text never shows a caret (including browser caret-browsing mode).
   Real fields keep their normal caret. */
body { caret-color: transparent; }
input, textarea, select, [contenteditable="true"] { caret-color: auto; }
input[readonly], textarea[readonly] { caret-color: transparent; }

/* Two-column fields: allow both columns to shrink, never let a select or hint
   force an unequal column; stack earlier on tablets. */
.grid2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid2 > * { min-width: 0; }
.field { min-width: 0; }
.field small { overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .grid2 { grid-template-columns: 1fr; }
}

/* Compact top bar: keep controls on one line and reduce dead vertical space. */
.topbar {
  padding: 10px 30px;
}
.topbar > div:first-child {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.topbar .save-status {
  font-size: 11px;
  white-space: nowrap;
}
.top-actions { flex-shrink: 0; }
@media (max-width: 1100px) {
  .topbar .save-status { display: none; }
}
@media (max-width: 700px) {
  .topbar { padding: 10px 18px; }
  .topbar > div:first-child {
    display: block;
    flex: 1 1 100%;
  }
}

@media (max-width: 700px) {
  .field input,
  .field textarea,
  .field select {
    font-size: 16px;
  }
}

/* Saved-plan rows on the landing page, including delete. */
.plan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.plan-row:first-of-type { border-top: 0; }
.plan-row > div {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.plan-row small { white-space: nowrap; }
.link-button.danger { color: var(--red); }
.sidebar footer .link-button {
  display: block;
  margin-top: 8px;
}
.sidebar footer .link-button.danger { color: #f0b4b4; }

/* Breathing room between the advanced skill line and the landing footer. */
.advanced-line { padding-bottom: 8px; }
.landing footer { margin-top: 38px; }

/* Type scale: body/inputs 15, primary actions 15, toolbar 14, nav 14,
   supporting copy 12, eyebrow 11. Do not shrink body text to fit. */
.sidebar nav button { font-size: 14px; }
.nav-index { font-size: 10px; }
.top-actions button {
  padding: 8px 12px;
  font-size: 14px;
}
.topbar select {
  padding: 6px 28px 6px 10px;
  font-size: 14px;
}
.field input,
.field textarea,
.field select {
  font-size: 15px;
}
.field small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
.plan-row small { font-size: 12px; }
@media (max-width: 700px) {
  .sidebar nav button { font-size: 13px; }
}

.plans-top { margin-top: 20px; }