:root{
  --white:#fff; --milk:#FAFAFA; --cream:#EEE; --line:#EEE; --line2:rgba(0,0,0,.08);
  --silver:#707070; --disabled:#B8B8B8; --gray:#5f5f5f; --dgray:#595959; --black:#000;
  --yellow:#9A5B00; --green:#0F7938; --red:#D3394B; --blue:#1c6c93; --purple:#5137F4;
  --bg-ok:#EBF9F3; --bg-warn:#FEF6EB; --bg-err:#FCF0F1; --bg-info:#EEF8FE; --bg-purple:#F1EFFE;
  --fg-ok:#0F7938; --fg-warn:#E88B00; --fg-err:#D3394B; --fg-info:#1c6c93;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:#fff;color:#000;font-family:var(--sans);-webkit-font-smoothing:antialiased;padding-left:64px}
a{color:inherit}

/* sidebar */
.sidebar{position:fixed;left:0;top:0;bottom:0;width:64px;z-index:195;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding:20px 0}
.sidebar .logo{width:24px;height:24px;color:#000;margin-bottom:28px}
.sidebar .icons{display:flex;flex-direction:column;align-items:center;gap:10px;flex:1}
.icon-btn{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#5f5f5f;cursor:pointer}
.icon-btn:hover{background:#FAFAFA;color:#000}
.icon-btn.on{background:var(--bg-purple);color:var(--purple)}
.avatar{width:36px;height:36px;border-radius:10px;background:#EEE;display:flex;align-items:center;justify-content:center;font-size:16px;color:#5f5f5f;margin-top:8px}

/* topbar */
.topbar{position:sticky;top:0;z-index:190;height:64px;background:#fff;display:flex;align-items:center;padding:0 24px;box-shadow:0 1px 0 var(--line)}
.tb-crumb{display:flex;align-items:center;gap:0;flex-shrink:0}
.tb-crumb .back{width:38px;height:38px;border:none;background:transparent;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#595959;margin-right:8px}
.tb-crumb .back:hover{background:rgba(0,0,0,.06)}
.tb-crumb .seg{font-size:20px;color:#5f5f5f;cursor:pointer}
.tb-crumb .seg:hover{color:#000}
.tb-crumb .seg.last{color:#000;cursor:default;max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-crumb .sep{color:#707070;margin:0 8px;font-size:20px}
.tb-actions{display:flex;gap:6px;flex-shrink:0;padding:0 16px}

main{max-width:1280px;margin:0 auto}
main.full{max-width:none}

/* buttons */
.btn{height:32px;padding:0 12px;border-radius:8px;border:none;font:450 16px/32px var(--sans);cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:.15s}
.btn-primary{background:#000;color:#fff}.btn-primary:hover{background:#4A4A4A}
.btn-primary:disabled{background:rgba(0,0,0,.24);color:#fff;cursor:not-allowed}
.btn-secondary{background:rgba(0,0,0,.08);color:#000}.btn-secondary:hover{background:rgba(0,0,0,.16)}
.btn-text{background:transparent;color:#000}.btn-text:hover{background:rgba(0,0,0,.08)}
.btn-danger{background:var(--bg-err);color:var(--red)}.btn-danger:hover{background:#f7dfe2}
.btn-sm{height:28px;padding:0 10px;font-size:16px;line-height:28px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* type badges */
.ttext{font-size:16px;letter-spacing:.02em}
.ttext-weg{color:var(--blue)}.ttext-mv{color:var(--purple)}.ttext-sev{color:var(--yellow)}

/* pills */
.pill{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:100px;font-size:16px;font-weight:450;white-space:nowrap}
.pill-warn{background:rgba(232,139,0,.08);color:var(--yellow);border:1px solid rgba(232,139,0,.16)}
.pill-info{background:var(--bg-info);color:var(--fg-info);border:1px solid rgba(42,168,233,.18)}
.pill-purple{background:var(--bg-purple);color:var(--purple);border:1px solid rgba(81,55,244,.18)}
.pill-gray{background:rgba(0,0,0,.06);color:#5f5f5f}
.pill-ok{background:var(--bg-ok);color:var(--fg-ok);border:1px solid rgba(3,177,94,.18)}
.status{display:flex;align-items:center;gap:8px;font-size:16px}
.dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.dot-green{background:var(--green)}.dot-orange{background:var(--yellow)}.dot-gray{background:var(--silver)}

/* headings */
.hub-h1{font-size:32px;line-height:40px;font-weight:450;margin:0 0 10px}
.hub-meta{display:flex;align-items:center;gap:10px;font-size:16px;color:#5f5f5f}
.eyebrow{font-size:16px;color:#5f5f5f;margin-bottom:8px}
.section-bar{display:flex;align-items:center;gap:12px;margin:44px 0 20px}
.section-bar:first-of-type{margin-top:0}
.section-bar .label{font-size:16px;white-space:nowrap}
.section-bar .rule{flex:1;height:2px;background:var(--line);border-radius:1px}

/* dropdown menus (reused for overflow + row menus) */
.yr-btn{height:40px;padding:0 16px;border:1.5px solid var(--line);border-radius:10px;background:#fff;font:450 16px var(--sans);cursor:pointer;display:flex;align-items:center;gap:8px;white-space:nowrap}
.yr-btn:hover{border-color:#000}
.yr-menu{position:absolute;top:46px;right:0;width:200px;background:#fff;border:1.5px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:210;overflow:hidden}
.yr-menu button{width:100%;height:38px;padding:0 14px;border:none;background:transparent;font:450 16px var(--sans);cursor:pointer;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:8px}
.yr-menu button:hover{background:#F2F2F2}
.yr-menu button.danger{color:var(--red)}
.yr-menu button:disabled{opacity:.4;cursor:not-allowed}

/* library / grouped panel */
.lib-group{padding:24px 0;margin-bottom:64px}
.lib-group .acc-section-head{background:#fff;border:1px solid var(--line);border-bottom:none}
.lib-group .acc-table-wrap{background:#fff}
.acc-section{margin-bottom:24px}
.acc-section-head{display:flex;align-items:center;gap:12px;padding:16px 22px;background:#F7F7F8;border-radius:14px 14px 0 0;cursor:pointer;user-select:none}
.acc-section-head .lbl{font-size:16px}
.acc-section-head .cnt{font-size:16px;color:#707070}
.acc-section-head .chev{display:flex;color:#5f5f5f;transition:transform .2s}
.acc-table-wrap{border:1.5px solid var(--line);border-top:none;border-radius:0 0 14px 14px;overflow-x:auto}
.acc-table-wrap.standalone{border-top:1.5px solid var(--line);border-radius:14px}
.acc-table{width:100%;border-collapse:collapse;font-family:var(--sans)}
.acc-th{font-size:16px;color:#595959;padding:16px 24px;text-align:left;border-bottom:1px solid var(--line2);background:#fff;font-weight:450;line-height:1.35;white-space:nowrap}
.acc-td{padding:16px 24px;min-height:72px;font-size:16px;border-top:1px solid var(--line2);vertical-align:middle;line-height:1.45}
.acc-row{cursor:pointer}
.acc-row:hover td{background:#FAFAFA}
.acc-row.warnrow td{background:var(--bg-warn)}
.acc-row.flagrow td{background:var(--bg-purple)}
.acc-row.hiddenrow td{opacity:.55}
.acc-num{font-family:var(--mono);color:#5f5f5f;font-size:16px}

/* account hierarchy (parent/child): elbow connector on the code + an indented guide-rail on the name,
   so nesting is legible without relying on a barely-visible arrow glyph */
.tree-elbow{display:inline-block;color:var(--disabled);font-size:15px;margin-right:6px}
.tree-indent{border-left:2px solid var(--line2);padding-left:14px}
.acc-row.is-parent .vk-name,.acc-row.is-parent .acc-num{font-weight:600;color:#000}
.acct-chev{display:inline-flex;align-items:center;color:#5f5f5f;transition:transform .2s;margin-right:8px;vertical-align:middle;cursor:pointer}
.acct-chev:hover{color:#000}
.dash{color:#707070}
.mark-ok{color:var(--green)}.mark-no{color:#707070}
.vk-name{font-size:16px;line-height:1.4}.vk-sub{font-size:16px;color:#707070;margin-top:5px;line-height:1.45;max-width:720px}
.more-cell{text-align:center;color:#5f5f5f}
.more-btn{width:34px;height:34px;border:none;background:transparent;border-radius:9px;cursor:pointer;color:#707070;display:inline-flex;align-items:center;justify-content:center}
.more-btn:hover{background:rgba(0,0,0,.06);color:#000}

/* form fields */
.field-label{font-size:16px;color:#5f5f5f;margin-bottom:6px;display:flex;align-items:center;gap:6px}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;margin-bottom:24px}
.card-head{padding:20px 28px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.card-head h3{font-size:16px;font-weight:450;margin:0}
.card-pad{padding:28px}
.field{margin-bottom:20px}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ddbtn{width:100%;height:46px;padding:0 16px;border:1.5px solid var(--line);border-radius:12px;background:#fff;font:450 16px var(--sans);color:#000;cursor:pointer;display:flex;align-items:center;justify-content:space-between;text-align:left;gap:8px}
.ddbtn:hover{border-color:#000}
.ddbtn:disabled{cursor:not-allowed;background:#F7F7F8;color:#B8B8B8}
.ni,.ns{width:100%;height:46px;padding:0 16px;border:1.5px solid var(--line);border-radius:12px;font:450 16px var(--sans);color:#000;background:#fff}
.ni:focus,.ns:focus{outline:none;border-color:#000}
.ni:disabled,.ns:disabled{background:#F7F7F8;color:#B8B8B8}
.radio-row,.check-row{display:flex;gap:20px;align-items:center;font-size:16px;padding:6px 0;flex-wrap:wrap}
.radio-row label,.check-row label{display:flex;align-items:center;gap:9px;cursor:pointer}
input[type=checkbox],input[type=radio]{width:22px;height:22px;min-width:22px;cursor:pointer;accent-color:#000;flex-shrink:0;margin:0}
.note{font-size:16px;color:#595959;background:#FAFAFA;border-radius:12px;padding:13px 16px;margin-top:14px;line-height:1.55}
.note.warn{background:var(--bg-warn);color:#9A5B00}
.note.err{background:var(--bg-err);color:var(--red)}
.note.info{background:var(--bg-info);color:#1c6c93}
.note.purple{background:var(--bg-purple);color:var(--purple)}

/* meta strip */
.acct-meta{display:flex;align-items:center;gap:32px;padding:2px 2px 22px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:28px}
.am-item{display:flex;align-items:center;gap:10px}
.am-label{font-size:16px;color:#707070}
.am-value{font-size:16px}

/* context panels (HGA / EP) — same visual language as the Distribution Keys prototype */
.ctx-panel{background:#FAFAFA;border:1px solid var(--line2);border-radius:14px;padding:18px 20px;margin-bottom:16px}
.ctx-panel:last-of-type{margin-bottom:0}
.ctx-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.ctx-tag{font-size:16px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:5px 10px;border-radius:6px;flex-shrink:0}
.ctx-tag-hga{background:var(--bg-info);color:var(--fg-info)}
.ctx-tag-ep{background:rgba(0,0,0,.07);color:#595959}
.ctx-tag-sm{font-size:16px;padding:4px 8px;}

/* modal */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;z-index:300;padding:20px}
.modal{background:#fff;border-radius:20px;box-shadow:0 12px 40px rgba(0,0,0,.16);width:560px;max-width:96vw;max-height:90vh;display:flex;flex-direction:column}
.modal.wide{width:720px}
.modal-head{padding:24px 28px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.modal-head h3{font-size:19px;font-weight:450;margin:0}
.modal-body{flex:1;overflow:auto;padding:28px}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:16px 24px;border-top:1px solid var(--line);flex-shrink:0}
.sqbtn{width:32px;height:32px;border:none;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.08)}
.sqbtn:hover{background:rgba(0,0,0,.16)}
.sqbtn-tertiary{width:32px;height:32px;border:none;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;background:transparent;color:#595959}
.sqbtn-tertiary:hover{background:rgba(0,0,0,.06);color:#000}
.picker-list{border:1.5px solid var(--line);border-radius:14px;overflow:hidden}
.picker-item{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--line);cursor:pointer}
.picker-item:last-child{border-bottom:none}
.picker-item:hover{background:#FAFAFA}
.picker-item .name{font-size:16px}.picker-item .meta{font-size:16px;color:#5f5f5f}
.picker-item.sel{background:var(--bg-purple)}

/* CTA */
.cta{display:flex;align-items:center;justify-content:space-between;gap:20px;border-radius:16px;padding:18px 22px;margin-bottom:28px}
.cta.warn{background:#FBEBD6;border:1px solid rgba(180,83,9,.24);color:#B45309}
.cta.ok{background:var(--bg-ok);border:1px solid rgba(3,177,94,.16)}
.cta.purple{background:var(--bg-purple);border:1px solid rgba(81,55,244,.16);color:var(--purple)}
.cta.info{background:var(--bg-info);border:1px solid rgba(42,168,233,.18);color:#1c6c93}

/* toast */
.toast-wrap{position:fixed;bottom:24px;right:24px;z-index:400;display:flex;flex-direction:column;gap:8px}
.toast{background:#000;color:#fff;font-size:16px;padding:13px 18px;border-radius:12px;box-shadow:0 8px 16px rgba(0,0,0,.16);display:flex;align-items:center;gap:8px;max-width:420px}

/* top-center toast */
.toast-top-wrap{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:500;display:flex;flex-direction:column;align-items:center;gap:8px}
.toast-top{background:#03B15E;color:#fff;font-size:16px;padding:13px 20px;border-radius:12px;box-shadow:0 8px 20px rgba(0,0,0,.18);display:flex;align-items:center;gap:8px;white-space:nowrap;animation:toastTopIn .25s ease-out, toastTopOut .25s ease-in 2.55s forwards}
@keyframes toastTopIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
@keyframes toastTopOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-12px)}}

/* properties overview (grouped "current year" header) */
.props-table{width:100%;border-collapse:collapse;font-family:var(--sans)}
.props-table th, .props-table td{padding:18px 22px;text-align:left;border-bottom:1px solid var(--line2);line-height:1.45}
.props-table thead tr.grp-row th{padding:10px 20px 8px;border-bottom:none;font-size:16px;letter-spacing:.04em;color:#707070;font-weight:450}
.props-table thead tr.grp-row th.grp-shade{background:#F5F5F5}
.props-table thead tr.lbl-row th{font-size:16px;letter-spacing:.03em;color:#595959;font-weight:450;padding-top:8px;padding-bottom:14px;text-transform:uppercase}
.props-table thead tr.lbl-row th.grp-shade{background:#F5F5F5}
.props-table td.grp-shade{background:#FAFAFA}
.props-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.props-table tbody tr:hover td{background:#F5F5F5}
.props-table tbody tr:hover td.grp-shade{background:#EFEFEF}
.props-name{font-size:16px}
.props-sub{font-size:16px;color:#707070;margin-top:2px}

/* right compact sidebar */
.sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.12);z-index:290;animation:fadein .15s ease;}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.sidebar-panel{position:fixed;top:0;right:0;bottom:0;width:380px;max-width:92vw;background:#fff;box-shadow:-8px 0 32px rgba(0,0,0,.12);z-index:291;display:flex;flex-direction:column;border-left:1px solid var(--line);animation:slidein .18s ease;}
@keyframes slidein{from{transform:translateX(100%)}to{transform:translateX(0)}}
.sidebar-head{padding:20px 22px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.sidebar-head h3{font-size:17px;font-weight:450;margin:0}
.sidebar-body{flex:1;overflow:auto;padding:8px 0}
.sidebar-item{padding:14px 22px;border-bottom:1px solid #F2F2F2}
.sidebar-item .sb-top{display:flex;align-items:center;gap:8px;margin-bottom:4px;}
.sidebar-item .sb-msg{font-size:16px;line-height:1.45;}
.sidebar-item .sb-meta{font-size:16px;color:#707070;margin-top:3px;}

/* ===== Guided new-template flow (integrated, no stepper) ===== */
.nt-wrap{max-width:760px;margin:0 auto;padding:44px 40px 104px}
.nt-wrap-wide{max-width:1220px}
.nt-eyebrow{font-size:16px;letter-spacing:.06em;text-transform:uppercase;color:#707070;font-family:var(--mono);margin-bottom:12px;display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.nt-eyebrow .prog{color:#707070}
.nt-title{font-size:30px;line-height:1.18;font-weight:450;margin:0 0 10px;max-width:22ch}
.nt-lede{font-size:16px;color:#5f5f5f;line-height:1.6;max-width:60ch;margin-bottom:32px}
.nt-body{min-height:30vh}
.nt-foot{position:fixed;left:64px;right:0;bottom:0;z-index:20;height:64px;background:#fff;border-top:1px solid var(--line);display:flex;justify-content:center}
.nt-foot-inner{width:100%;max-width:760px;height:100%;padding:0 40px;display:flex;align-items:center;justify-content:space-between}
.nt-foot-inner.wide{max-width:1220px}
.nt-foot .right{display:flex;gap:8px;align-items:center}
.btn-lg{height:44px;padding:0 22px;border-radius:11px;font-size:16px}
.link-btn{background:none;border:none;color:#5f5f5f;font:450 16px var(--sans);cursor:pointer;padding:8px 4px}
.link-btn:hover{color:#000}
.sec-nav{display:flex;align-items:center;gap:10px;margin-bottom:20px;flex-wrap:wrap}
.sec-pip{height:30px;padding:0 13px;border-radius:100px;border:1.5px solid var(--line);background:#fff;font:450 16px var(--sans);color:#707070;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.sec-pip.on{border-color:#000;color:#000}
.sec-pip.done{color:#333}
.sec-pip .tick{color:var(--green);display:inline-flex}
.sec-progress{font-size:16px;color:#707070;margin-left:auto;font-variant-numeric:tabular-nums}
.add-grid{display:grid;grid-template-columns:1fr 260px;gap:14px;align-items:end}
.mini-label{font-size:16px;color:#5f5f5f;margin-bottom:6px}
.row-actions{display:flex;align-items:center;justify-content:flex-end;gap:2px}
.pill-sm{height:24px;padding:0 8px;font-size:16px;gap:4px}
.sqbtn-tertiary:disabled{opacity:.4;cursor:not-allowed}
.sqbtn-tertiary:disabled:hover{background:transparent;color:#707070}
.rev-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:26px}
.rev-stat{border:1.5px solid var(--line);border-radius:14px;padding:18px}
.rev-stat .n{font:500 26px var(--mono);line-height:1;margin-bottom:8px}
.rev-stat .l{font-size:16px;color:#5f5f5f}
.rev-block{border:1.5px solid var(--line);border-radius:14px;padding:4px 20px;margin-bottom:14px}
.rev-line{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line2);font-size:16px}
.rev-line:last-child{border-bottom:none}
.rev-line .k{color:#5f5f5f}
.sd-row{display:flex;align-items:flex-start;gap:14px;border:1.5px solid var(--line);border-radius:14px;padding:16px 18px;margin-top:20px;cursor:pointer;transition:border-color .15s,background-color .15s}
.sd-row:hover{border-color:rgba(0,0,0,.24)}
.sd-row.on{border-color:#000;background:#FAFAFA}
.sd-row input[type=checkbox]{margin-top:2px;flex-shrink:0}
.sd-title{font-size:16px}
.sd-sub{font-size:16px;color:#707070;margin-top:4px;line-height:1.4}

/* custom hover banner (used for the System-required explanation) — rendered into #tipRoot (fixed, top-level) so a scrollable table wrapper never clips it */
.has-tip{cursor:help}
#tipRoot{position:fixed;top:0;left:0;z-index:500;pointer-events:none}
.tip-banner{
  position:fixed;transform:translate(-50%,-100%);
  width:260px;background:#1a1a1a;color:#fff;font-size:14px;font-weight:450;line-height:1.5;
  text-align:left;padding:11px 13px;border-radius:10px;box-shadow:0 10px 24px rgba(0,0,0,.2);
}
.tip-arrow{position:absolute;bottom:-6px;transform:translateX(-50%);border:6px solid transparent;border-top-color:#1a1a1a}

/* ===== Templates home (v2 entry point) ===== */
.th-wrap{max-width:1120px;margin:0 auto;padding:40px 40px 96px}
.th-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.th-head h1{font-size:32px;line-height:40px;font-weight:450;margin:0}
.btn-new{height:36px;padding:0 16px;border-radius:10px;background:#000;color:#fff;border:none;font:450 16px var(--sans);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.btn-new:hover{background:#4A4A4A}

/* hero */
.th-hero{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:20px;padding:40px 44px;margin-bottom:48px;min-height:224px;display:flex;align-items:center;
  background:linear-gradient(105deg,#FBFBFD 0%,#F5F3FF 52%,#F3E4FB 100%)}
.th-hero .copy{max-width:460px;position:relative;z-index:3}
.th-hero h2{font-size:26px;line-height:1.25;font-weight:450;margin:0 0 12px}
.th-hero p{font-size:16px;color:#5f5f5f;line-height:1.6;margin:0 0 24px;max-width:370px}
.th-hero .btn-hero{height:38px;padding:0 18px;border-radius:10px;background:#000;color:#fff;border:none;font:450 16px var(--sans);cursor:pointer}
.th-hero .btn-hero:hover{background:#4A4A4A}
/* faux document preview on the right */
.th-art{position:absolute;right:-40px;top:26px;bottom:-30px;width:520px;z-index:1;pointer-events:none}
.th-doc{position:absolute;background:#fff;border:1px solid rgba(0,0,0,.10);border-radius:12px;box-shadow:0 18px 40px rgba(40,20,90,.12)}
.th-doc-a{left:20px;top:8px;width:320px;height:230px;transform:rotate(-4deg);padding:22px 24px}
.th-doc-b{left:210px;top:34px;width:300px;height:220px;transform:rotate(3deg);padding:20px 22px}
.th-doc .dl{height:8px;border-radius:4px;background:#EDEBF3;margin-bottom:11px}
.th-doc .dl.t{height:12px;width:66%;background:#DFD8F0;margin-bottom:16px}
.th-doc .dl.s{width:88%}.th-doc .dl.m{width:72%}.th-doc .dl.q{width:52%}
.th-doc .drow{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.th-doc .drow .dk{width:10px;height:10px;border-radius:3px;background:#EDEBF3;flex-shrink:0}
.th-doc .drow .dt{height:8px;border-radius:4px;background:#EDEBF3;flex:1}

/* sections */
.th-sec{font-size:16px;font-weight:450;margin:0 0 16px}
.th-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:48px}

/* template cards */
.tcard{position:relative;border:1px solid var(--line);border-radius:14px;padding:20px 22px;background:#fff;cursor:pointer;transition:border-color .15s,box-shadow .15s;min-height:82px}
.tcard:hover{border-color:rgba(0,0,0,.26);box-shadow:0 2px 12px rgba(0,0,0,.06)}
.tcard .tt{font-size:16px;font-weight:450;margin-bottom:5px;padding-right:28px}
.tcard .ts{font-size:16px;color:#707070}
.tcard .tcard-more{position:absolute;top:13px;right:12px}
.tcard.lib{cursor:default}
.tcard.lib:hover{border-color:var(--line);box-shadow:none}
.tcard .addbtn{margin-top:16px;height:32px;padding:0 13px;border-radius:8px;background:rgba(0,0,0,.06);color:#000;border:none;font:450 16px var(--sans);cursor:pointer}
.tcard .addbtn:hover{background:rgba(0,0,0,.12)}

/* help cards */
.hcard{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);border-radius:14px;padding:20px 22px;background:#fff;cursor:pointer;transition:border-color .15s}
.hcard:hover{border-color:rgba(0,0,0,.26)}
.hcard .hic{flex-shrink:0;color:#000;margin-top:1px}
.hcard .ht{font-size:16px;font-weight:450}
.hcard .hs{font-size:16px;color:#707070;margin-top:3px;line-height:1.45}