@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600;font-display:swap;src:url(./vendor/fonts/bricolage-grotesque-latin-600-normal.woff2) format('woff2')}@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url(./vendor/fonts/bricolage-grotesque-latin-700-normal.woff2) format('woff2')}@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;src:url(./vendor/fonts/bricolage-grotesque-latin-800-normal.woff2) format('woff2')}@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(./vendor/fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2')}@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(./vendor/fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2')}@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(./vendor/fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2')}@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url(./vendor/fonts/ibm-plex-sans-latin-700-normal.woff2) format('woff2')}:root{font-family:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;font-variant-numeric:tabular-nums;color:#212a3b;background:#f3f5f7;font-size:15px;--green:#1f3457;--green2:#3b537d;--mint:#e4e8f0;--border:#dfe3e8;--cream:#f8f9fa;--ink:#20293a;--muted:#69758b;--gold:#c84179}*{box-sizing:border-box}body{margin:0;min-height:100vh}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}a{color:inherit}.app-shell{display:grid;grid-template-columns:244px minmax(0,1fr);min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;padding:30px 17px;background:#fff;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:28px}.brand{display:flex;align-items:center;gap:12px;padding:2px 11px}.brand-icon{width:39px;height:39px;border-radius:8px;background:var(--green);display:grid;place-items:center;color:white;font-size:23px}.brand-name{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-size:26px;font-weight:bold;letter-spacing:-.8px}.brand small{display:block;color:#898d94;font-size:10px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase}.nav{display:grid;gap:5px}.nav .nav-btn{width:100%;text-align:left;border:0;background:transparent;color:#5a667c;border-radius:8px;padding:13px 15px;display:flex;align-items:center;gap:12px;font-weight:650}.nav .nav-btn span{font-size:18px;width:20px;text-align:center}.nav .nav-btn:hover{background:#f3f4f6}.nav .nav-btn.active{background:var(--mint);color:#1a335e}.sidebar-bottom{margin-top:auto;padding:17px 15px;background:#f2f5f8;border:1px solid var(--border);border-radius:8px}.sidebar-bottom strong{display:block;font-size:13px}.sidebar-bottom p{margin:7px 0 0;color:var(--muted);font-size:12px;line-height:1.5}.sidebar-footer{text-align:center;color:#9b9fa7;font-size:10px}.main{min-width:0}.topbar{height:77px;border-bottom:1px solid var(--border);background:#f9fafb;display:flex;align-items:center;justify-content:space-between;padding:0 45px;gap:12px}.topbar .crumb{color:#67748b;font-size:13px}.topbar .crumb b{color:#26344d}.top-actions{display:flex;align-items:center;gap:10px}.pill{display:inline-flex;align-items:center;gap:7px;border:1px solid #d7dce5;background:#f0f3f9;color:#405882;border-radius:8px;padding:7px 11px;font-size:11px;font-weight:700}.container{max-width:1400px;margin:auto;padding:33px 46px 80px}.eyebrow{text-transform:uppercase;letter-spacing:2.2px;font-weight:750;color:#7b8493;font-size:10px}.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:0 0 27px}.page-head h1{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-size:39px;letter-spacing:-1.5px;margin:7px 0 10px;font-weight:600;color:#1e2a3e}.page-head p{margin:0;color:#797e86;line-height:1.6;max-width:620px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 17px;border-radius:10px;border:1px solid #d6d9de;background:#fff;color:#303f58;font-weight:700;font-size:13px;text-decoration:none;white-space:nowrap;transition:transform .15s,background .15s}.btn:hover:not(:disabled){transform:translateY(-1px);background:#f4f6f9}.btn.primary{background:var(--green);color:white;border-color:var(--green)}.btn.primary:hover{background:#324a74}.btn.soft{background:#e6eaf1;border-color:#e6eaf1;color:#1e3865}.btn.danger{color:#b34130;border-color:#e6bcb5}.btn.tiny{padding:7px 11px;font-size:12px}.btn.ghost{border:none;background:transparent}.hero{background:linear-gradient(111deg,#203353 0%,#395077 76%,#596f95 100%);color:white;position:relative;overflow:hidden;border-radius:8px;padding:39px 43px;min-height:221px;display:flex;justify-content:space-between;align-items:center;gap:30px}.hero .eyebrow{color:#c6cedb}.hero h2{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-size:35px;line-height:1.18;letter-spacing:-1px;font-weight:500;margin:12px 0;max-width:590px}.hero p{color:#d5ddea;max-width:550px;line-height:1.6;font-size:14px;margin:0 0 18px}.hero .btn{background:white;border-color:white}.hero-art{width:245px;height:175px;flex-shrink:0;position:relative;transform:rotate(-8deg)}.hero-art .fabric{position:absolute;width:130px;height:136px;border:7px solid #f5f6f8;border-radius:2px;box-shadow:0 10px 32px #0c172c5b;transform:rotate(10deg);background-color:#b6bfce;background-image:radial-gradient(#f8e7ee 2px,transparent 2.5px);background-size:19px 19px;left:35px;top:11px}.hero-art .fabric.b{transform:rotate(-15deg);top:22px;left:100px;background-color:#c84179;background-image:linear-gradient(45deg,#f4d9e4 25%,transparent 25%,transparent 75%,#f4d9e4 75%),linear-gradient(45deg,#f4d9e4 25%,transparent 25%,transparent 75%,#f4d9e4 75%);background-size:22px 22px;background-position:0 0,11px 11px}.metric-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin:22px 0 34px}.metric{border:1px solid var(--border);background:#fff;border-radius:8px;padding:20px 23px}.metric .label{color:#878c96;font-size:12px;font-weight:650}.metric .value{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-size:32px;color:#233656;margin:9px 0 1px}.metric small{color:#989ca2;font-size:11px}.section-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:12px 0 17px}.section-head h2{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-size:24px;letter-spacing:-.4px;margin:0}.section-head p{margin:5px 0 0;color:var(--muted);font-size:13px}.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.fabric-card,.pattern-card,.project-card,.recommendation,.surface{background:#fff;border:1px solid var(--border);border-radius:8px;overflow:hidden;box-shadow:0 3px 11px #14254305}.fabric-cover{height:165px;position:relative;background:#d3d8e2;overflow:hidden}.fabric-cover img,.pattern-cover img{width:100%;height:100%;object-fit:cover}.fabric-cover .swatch,.pattern-cover .swatch{height:100%;width:100%;display:grid;place-items:center;color:#ffffffbb;font-family:'Bricolage Grotesque',system-ui,sans-serif;font-size:33px}.fabric-cover .tag{position:absolute;bottom:12px;left:12px;background:#f8f9faeb;border:1px solid #fffa;color:#485469;padding:6px 9px;border-radius:7px;font-size:11px;font-weight:700}.fabric-cover .oop{position:absolute;right:11px;top:11px;background:#f0f3f6;color:#9d2758;border-radius:6px;padding:6px 9px;font-size:10px;font-weight:800}.card-content{padding:16px}.card-content h3{margin:0 0 6px;font-family:'Bricolage Grotesque',system-ui,sans-serif;font-size:20px;font-weight:600}.meta{font-size:12px;color:#888d97;margin:0 0 13px}.tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.tag-chip{display:inline-block;background:#f1f2f5;border-radius:5px;padding:5px 8px;font-size:10px;color:#5c6e8c;font-weight:700}.card-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid #ebedf0;margin-top:15px;padding-top:12px}.card-foot strong{color:#243b62;font-size:12px}.tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 20px}.tools input[type=search]{min-width:230px;max-width:350px;flex:1}.filter{border:1px solid #e1e4ea;border-radius:8px;padding:8px 12px;background:white;font-size:12px;color:#65738b}.filter.active{background:#dee3ed;border-color:#ced6e4;color:#1d3661;font-weight:750}.empty{min-height:290px;border:1px dashed #cacfd7;background:#fff;border-radius:8px;padding:44px;text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px}.empty .glyph{font-size:37px}.empty h3{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-size:24px;margin:0}.empty p{color:#858a92;max-width:480px;line-height:1.6;font-size:13px;margin:0 0 9px}.two-cols{display:grid;grid-template-columns:320px 1fr;align-items:start;gap:20px}.surface{padding:25px}.surface h3{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-size:22px;margin:0 0 9px}.surface p{color:#7d8490;line-height:1.6;font-size:13px}.field{margin:12px 0}.field label{display:block;color:#48566d;font-size:12px;font-weight:750;margin:0 0 8px}.field input,.field select,.field textarea,.tools input[type=search],.field input[type=number]{width:100%;padding:11px 12px;border-radius:9px;border:1px solid #dce0e6;background:#fff;color:#233149;outline:none}.field input:focus,.field select:focus,.field textarea:focus{border-color:#6e81a1;box-shadow:0 0 0 3px #d7deeb}.field textarea{min-height:83px;resize:vertical}.row-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}.mini-muted{font-size:11px;color:#8a8f98;line-height:1.5}.recs{display:grid;gap:13px}.recommendation{padding:21px}.rec-top{display:flex;justify-content:space-between;gap:15px;align-items:start}.rec-top h3{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-size:22px;margin:0 0 5px}.rec-top .rank{color:#60718e;font-size:11px;text-transform:uppercase;font-weight:800;letter-spacing:1.3px}.rec-tags{margin:12px 0;display:flex;gap:6px;flex-wrap:wrap}.progress-track{background:#eceef2;height:9px;border-radius:99px;overflow:hidden;margin:13px 0 7px}.progress-fill{height:100%;background:#617cab;border-radius:99px}.rec-stats{display:flex;justify-content:space-between;gap:15px;font-size:12px;color:#62718a}.rec-footer{display:flex;align-items:center;justify-content:space-between;margin-top:17px;gap:12px}.caution{display:flex;align-items:start;gap:9px;padding:12px 14px;background:#f2f4f6;border:1px solid #f0cada;border-radius:9px;color:#a43060;font-size:12px;line-height:1.5;margin:10px 0}.success-note{background:#edf1f8;border:1px solid #d3dbea;border-radius:10px;padding:12px 14px;color:#334e7d;font-size:12px;line-height:1.6;margin:12px 0}.lined{border-top:1px solid var(--border);padding:12px 0;display:flex;align-items:center;justify-content:space-between;gap:10px}.pattern-cover{height:117px;background:#d9dfe6;display:grid;place-items:center;position:relative;overflow:hidden}.pattern-cover img{position:absolute;inset:0}.fabric-cover{overflow:hidden}.pattern-cover .pattern-icon{position:absolute;background:#fffa;box-shadow:0 5px 18px #0001;border-radius:9px;width:74px;height:92px;display:grid;place-items:center;font-size:39px}.modal-backdrop{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:#1b263bc2;padding:18px}.modal{background:#fff;border-radius:8px;max-height:min(92vh,860px);width:min(100%,650px);box-shadow:0 25px 90px #08162d50;overflow:auto}.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;border-bottom:1px solid #ebedf0;padding:25px 27px 17px}.modal-head h2{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-size:27px;margin:0 0 4px}.modal-head p{color:#848993;font-size:12px;margin:0}.modal-body{padding:20px 27px}.modal-foot{display:flex;justify-content:space-between;align-items:center;gap:9px;border-top:1px solid #ebedf0;padding:17px 27px}.x{border:0;background:#f0f1f4;border-radius:9px;width:31px;height:31px;color:#67748b;font-size:19px}.upload{display:block;text-align:center;padding:18px;border:1px dashed #bbc3d1;border-radius:10px;background:#f6f7fa;cursor:pointer;font-size:13px;color:#4c5f81}.upload input{display:none}.upload img{max-height:130px;max-width:100%;display:block;margin:8px auto;border-radius:5px}.form-help{color:#9096a0;font-size:11px;line-height:1.6;margin-top:5px}.warning-text{color:#b13368}.feature-blocks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.feature-box{background:#f4f5f8;border:1px solid #e8ecf2;border-radius:8px;padding:19px}.feature-box b{display:block;margin:10px 0 5px;color:#243656}.feature-box p{font-size:12px;line-height:1.5;margin:0}.status-dot{height:8px;width:8px;border-radius:50%;background:#798eb1;display:inline-block}.small-label{font-size:11px;letter-spacing:1px;text-transform:uppercase;font-weight:800;color:#8b93a2}.project-line{border:1px solid var(--border);border-radius:8px;background:#fff;padding:19px;margin-bottom:13px}.project-line h3{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-size:21px;margin:0 0 4px}.project-line p{font-size:12px;color:#848992;margin:6px 0}.project-details{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:15px;border-top:1px solid #eceff3;padding-top:15px}.info-note{border:1px solid #d8dde7;background:#f2f5f8;padding:17px 18px;border-radius:8px;font-size:13px;color:#45597c;line-height:1.6}.toast{position:fixed;bottom:25px;right:25px;background:#1e3153;color:white;padding:13px 18px;border-radius:10px;z-index:200;font-size:13px;box-shadow:0 12px 35px #0c172c30;display:flex;align-items:center;gap:12px;max-width:min(90vw,480px)}.toast span{user-select:text}.toast-x{border:0;background:#ffffff2e;color:white;border-radius:6px;width:26px;height:26px;font-size:16px;line-height:1;flex-shrink:0}.toast-x:hover{background:#ffffff4d}.settings-list{display:grid;gap:12px}.settings-item{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:17px 0;border-bottom:1px solid #e7eaef}.settings-item b{display:block;font-size:14px}.settings-item small{display:block;color:#848993;line-height:1.6;margin-top:4px}.table-wrap{overflow-x:auto}.table{width:100%;border-collapse:collapse;font-size:12px}.table th{text-align:left;color:#657692;padding:11px 8px;border-bottom:1px solid #e2e5eb}.table td{padding:11px 8px;border-bottom:1px solid #eceff3;vertical-align:top}.table strong{color:#2b4167}.table select{width:100%;max-width:360px;padding:11px 12px;border-radius:9px;border:1px solid #dce0e6;background:#fff;color:#233149;outline:none;font:inherit}.table select:focus{border-color:#6e81a1;box-shadow:0 0 0 3px #d7deeb}.loading{opacity:.7;pointer-events:none}.file-link{font-size:11px;color:#304b79}.note{font-size:12px;color:#78808d;line-height:1.6}.combo-title{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-size:17px}.backup-nudge{display:flex;align-items:center;justify-content:space-between;gap:14px;background:#eef4ff;border-bottom:1px solid #d5e2f7;color:#33507e;font-size:13px;padding:11px 45px}.backup-nudge .actions{display:flex;gap:8px;flex-shrink:0}.mobile-top{display:none}
@media(max-width:1180px){.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.topbar{padding:0 26px}.container{padding:29px 26px 70px}.sidebar{padding:24px 11px;width:210px}.app-shell{grid-template-columns:210px 1fr}}@media(max-width:870px){.app-shell{display:block}.sidebar{display:none}.mobile-top{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#fff;border-bottom:1px solid var(--border)}.mobile-top .brand{padding:0}.mobile-top .brand-name{font-size:21px}.mobile-nav{display:flex;overflow:auto;padding:8px 10px;background:#fff;border-bottom:1px solid var(--border);gap:3px;scrollbar-width:none}.mobile-nav .nav-btn{padding:9px 12px;white-space:nowrap;font-size:12px;background:none;border:none;border-radius:9px;color:#67758d}.mobile-nav .nav-btn.active{background:#e1e6ef;color:#213961;font-weight:700}.topbar{height:48px;padding:0 17px}.container{padding:23px 15px 70px}.page-head h1{font-size:32px}.hero-art{display:none}.hero{padding:27px;min-height:unset}.hero h2{font-size:29px}.two-cols{grid-template-columns:1fr}.metric-row{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.card-grid{grid-template-columns:1fr}.metric-row{gap:9px}.metric{padding:14px}.metric .value{font-size:25px}.page-head{align-items:flex-start}.page-head .btn{font-size:11px;padding:9px}.page-head h1{font-size:30px}.hero h2{font-size:26px}.hero{border-radius:8px;padding:23px}.rec-top,.rec-footer{flex-wrap:wrap}.feature-blocks{grid-template-columns:1fr}.modal-body,.modal-head,.modal-foot{padding-left:17px;padding-right:17px}.row-fields{grid-template-columns:1fr}.topbar .pill{display:none}.tools input[type=search]{min-width:100%}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* ========================================================
   SEWMETRY STUDIO / VISUAL SYSTEM v2
   Forest + warm ivory + sage + copper: calm, tactile, editorial.
   ======================================================== */
:root{
  --green:#21304b;
  --green2:#45597b;
  --mint:#e6eaf0;
  --border:#dde2e7;
  --cream:#fbfbfc;
  --ink:#212a3b;
  --muted:#66748b;
  --gold:#c84179;
  color:#212a3b;
  background:#f0f3f6;
}

/* One shared studio header keeps navigation and context in the same layout. */
.app-shell{display:block;min-height:100vh}
.sidebar,.mobile-top,.mobile-nav{display:none!important}
.main{min-height:100vh}
.main>.topbar{position:sticky;top:0;z-index:60;height:auto;min-height:82px;padding:12px clamp(18px,3vw,46px);display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px;background:#f9fafbed;backdrop-filter:blur(14px)}
.main>.topbar>.brand{grid-column:1;white-space:nowrap;padding:0}
.main>.topbar>.brand small{font-size:9px;letter-spacing:1.2px}
.main>.topbar>.nav{grid-column:2;display:flex;align-items:center;justify-content:flex-start;gap:3px;min-width:0;overflow-x:auto;scrollbar-width:none}
.main>.topbar>.nav::-webkit-scrollbar{display:none}
.main>.topbar>.nav .nav-btn{display:flex;flex:0 0 auto;flex-direction:row;align-items:center;justify-content:center;gap:7px;min-height:42px;width:auto;padding:8px 10px;border:0;border-radius:10px;background:transparent;color:#5d6b84;font-size:12px;white-space:nowrap}
.main>.topbar>.nav .nav-btn:hover{background:#eef1f4}
.main>.topbar>.nav .nav-btn.active{background:#e3e7ef;color:#1b325b;box-shadow:none}
.main>.topbar>.nav .nav-ico{width:auto;font-size:16px;line-height:1}
.main>.topbar>.nav .nav-label{width:auto;font-size:12px;line-height:1;font-weight:650}
.main>.topbar>.top-actions{grid-column:3;white-space:nowrap}
@media(max-width:1120px){.main>.topbar{gap:12px;padding-inline:20px}.main>.topbar>.nav .nav-btn{padding-inline:8px}.main>.topbar>.nav .nav-label{font-size:11px}}
@media(max-width:870px){
 .main>.topbar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand actions" "nav nav";gap:8px 12px;padding:11px 16px 8px}
 .main>.topbar>.brand{grid-area:brand}.main>.topbar>.top-actions{grid-area:actions}
 .main>.topbar>.nav{grid-area:nav;justify-content:flex-start;margin:0 -3px;padding:0 3px 3px}
 .main>.topbar>.nav .nav-btn{min-height:38px}
 .container{padding:25px 22px 70px}
}
@media(max-width:600px){
 .main>.topbar{padding:9px 13px 6px;gap:6px 8px}
 .main>.topbar .brand-icon{width:34px;height:34px;border-radius:10px;font-size:20px}
 .main>.topbar .brand-name{font-size:22px}
 .main>.topbar .brand small{font-size:8px;letter-spacing:.9px}
 .main>.topbar>.top-actions{gap:5px}.main>.topbar>.top-actions .pill{padding:6px 8px;font-size:9px}
 .main>.topbar>.top-actions .btn{display:inline-flex;padding:7px 9px;font-size:11px}
 .main>.topbar>.nav .nav-btn{padding:7px 9px;font-size:11px}
 .main>.topbar>.nav .nav-label{font-size:11px}
 .main>.container{padding:20px 15px 45px}
 .main>.topbar>.top-actions .pill{display:inline-flex}
}
body{background:#f0f3f6;font-size:15px}
.sidebar{background:linear-gradient(180deg,#fcfcfd 0%,#f6f8fb 100%);border-right:1px solid #dee2ea;box-shadow:5px 0 29px #0f1f3c04;padding-top:39px}
.brand-icon{background:#23385d;box-shadow:0 7px 15px #21345524;border-radius:8px;font-size:21px}
.brand-name{color:#25334a;letter-spacing:-1px}
.sidebar .nav-btn{min-height:47px;transition:background .2s ease,color .2s ease;padding-left:15px}
.sidebar .nav-btn.active{background:#e2e7ef;color:#1c3257;box-shadow:inset 3px 0 #39578b}
.sidebar-bottom{background:linear-gradient(148deg,#e6ebf3,#eff1f4);border-color:#dde2ea;padding:20px}
.sidebar-bottom strong{color:#233b65}
.topbar{background:#fdfdfd;border-bottom:1px solid #e2e5e9;height:79px}
.topbar .crumb{font-size:12px;letter-spacing:.25px}
.topbar .crumb b{color:#253654}
.container{max-width:1440px;padding-top:37px}
.eyebrow{color:#5d7297;font-size:11px;letter-spacing:1.7px}
.page-head h1{font-size:41px;color:#1a2a45;font-weight:550}
.page-head p{font-size:14px;color:#5e6d86}
.btn{border-radius:8px;box-shadow:0 1px 1px #131f3305;transition:background .15s ease,transform .15s ease,box-shadow .15s ease}
.btn.primary{background:#263d64;border-color:#263d64}
.btn.primary:hover{background:#1c2f50;box-shadow:0 5px 14px #12274a1c}
.btn.soft{background:#e3e8f0;border-color:#dce1eb;color:#243e6b}
.hero{background:linear-gradient(115deg,#1b2f53 0%,#344b73 60%,#5b7299 100%);border:1px solid #263c62;min-height:245px;box-shadow:0 15px 34px #14294c1a}
.hero::after{content:'';position:absolute;inset:auto -100px -190px auto;border:1px solid #dde3ea2b;width:450px;height:450px;border-radius:50%;pointer-events:none}
.hero h2{font-size:37px;line-height:1.17;font-weight:500}
.hero p{color:#dee4ee;font-size:14px}
.hero .eyebrow{color:#d0dbef}
.hero .btn{color:#23385b;border:0;padding:13px 18px}
.hero-art .fabric{border-color:#f6f8fa;box-shadow:0 10px 32px #05193b5b}
.metric{border-radius:8px;padding:21px 23px;background:linear-gradient(145deg,#fff 70%,#f8fafe 100%);border-color:#e1e5ec;box-shadow:0 3px 10px #192a4606}
.metric .label{font-size:12px;color:#61708b}
.metric .value{color:#1c3156;font-size:35px}
/*Muse(2026-10-14):dashboard stat cards lift a little on hover,matching the fabric/pattern cards*/
.metric{transition:transform .16s ease,box-shadow .16s ease}
.metric:hover{transform:translateY(-3px);box-shadow:0 11px 26px #10264d16}
.section-head h2{color:#213351;font-size:25px}
.card-grid{gap:19px}
.fabric-card,.pattern-card,.recommendation,.surface,.project-line{border-radius:8px;border-color:#dfe3ea;box-shadow:0 4px 20px #172c4f0a}
.fabric-card,.pattern-card{transition:box-shadow .16s ease,transform .16s ease}
.fabric-card:hover,.pattern-card:hover{transform:translateY(-3px);box-shadow:0 11px 26px #10264d16}
.fabric-cover{height:182px;background:#dae0ea}
.fabric-cover .oop{background:#f1f3f6;color:#a02f5e}
.fabric-cover .tag{border-radius:8px}
.card-content{padding:17px}
.card-content h3{color:#21304a;font-size:21px}
.card-foot{flex-wrap:wrap;row-gap:10px}
.card-foot>div{display:flex;align-items:center;gap:3px;flex-wrap:wrap}
.tag-chip{background:#ebeef4;color:#46597b}
.pill{background:#ebeff7;color:#3e5377}
.tools{gap:9px}.filter.active{background:#273e66;color:#fff;border-color:#273e66}
.surface{background:#fcfcfd}.surface h3{color:#203251}
.recommendation{border-color:#dbe0e8}.recommendation .rec-top h3{color:#21314c}
.progress-fill{background:#7086ac}.progress-track{background:#dfe4ec}
.info-note{background:#ecf0f7;border-color:#d5dbe6;color:#3e5479}
.caution{background:#f3f5f8;border-color:#d13878;color:#a22f5f}
.upload{background:#f9fafd;border-color:#b4c0d2}
.modal{border-radius:8px;background:#fcfcfd}
.modal-backdrop{background:#192335bd;backdrop-filter:blur(5px)}
.modal-head h2{color:#202f4a}
.field input:focus,.field select:focus,.field textarea:focus,.tools input[type=search]:focus{outline:none;border-color:#6e81a2;box-shadow:0 0 0 3px #e0e7f2}
:focus-visible{outline:3px solid #a1b3d1;outline-offset:3px}
@media(max-width:870px){
  .mobile-top{padding:11px 19px;background:#fdfdfd;position:sticky;top:0;z-index:30;box-shadow:0 2px 10px #0e214109}
  .mobile-top .brand-icon{width:34px;height:34px}
  .mobile-top .brand-name{font-size:23px}
  .mobile-top .brand small{letter-spacing:1.1px;font-size:9px}
  .mobile-nav{position:fixed;inset:auto 0 0;z-index:70;display:flex;align-items:stretch;justify-content:space-around;overflow:visible;gap:0;padding:5px 3px calc(7px + env(safe-area-inset-bottom));border-top:1px solid #dce0e8;border-bottom:0;box-shadow:0 -8px 26px #1023450d;background:#fcfcfd}
  .mobile-nav .nav-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex:1;min-width:0;padding:7px 2px 5px;border-radius:8px;color:#65738b;white-space:normal;font-size:10px}
  .mobile-nav .nav-btn.active{color:#233c66;background:#e6eaf0}
  .mobile-nav .nav-ico{font-size:21px;line-height:22px}
  .mobile-nav .nav-label{font-size:10px;line-height:14px;font-weight:650}
  .topbar{height:43px}.container{padding-bottom:123px}
  .page-head h1{font-size:34px}
}
@media(max-width:600px){
  .top-actions .btn{display:none}
  .container{padding-top:22px}
  .page-head{gap:10px}
  .page-head h1{font-size:31px;line-height:1.12}
  .page-head p{font-size:13px}
  .hero{padding:27px 22px;box-shadow:0 8px 20px #0e254e13}
  .hero h2{font-size:29px}
  .fabric-cover{height:195px}
  .card-grid{gap:13px}
  .modal{border-radius:8px}
}

/* Dashboard textile moodboard */
.inspiration{position:relative;display:grid;grid-template-columns:minmax(190px,.8fr) minmax(0,2fr);gap:25px;align-items:center;margin:4px 0 32px;padding:24px 25px;border:1px solid #dce1e7;border-radius:8px;background:linear-gradient(115deg,#fcfcfd 0%,#eff2f5 100%);overflow:hidden}
.inspiration::after{content:'';position:absolute;right:18px;top:-33px;font:110px 'Bricolage Grotesque',system-ui,sans-serif;color:#4a5d7f0c;pointer-events:none}
.inspiration-copy{position:relative;z-index:1}.inspiration-copy h2{margin:7px 0 8px;font:500 25px/1.15 'Bricolage Grotesque',system-ui,sans-serif;letter-spacing:-.5px;color:#213250}.inspiration-copy p{max-width:290px;margin:0;color:#6c798f;font-size:12px;line-height:1.55}.inspiration-note{display:inline-flex;align-items:center;gap:6px;margin-top:13px;padding:6px 9px;border:1px solid #dbe0ea;border-radius:8px;background:#fcfcfd;color:#69768d;font-size:10px;font-weight:650}.inspiration-note i{color:#c84079;font-style:normal}
.inspiration-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px}.inspo-card{min-width:0;padding:7px 7px 9px;border:1px solid #e4e8ec;border-radius:8px;background:#fcfcfd;box-shadow:0 4px 12px #20325208;transition:transform .16s ease,box-shadow .16s ease}.inspo-card:hover{transform:translateY(-3px);box-shadow:0 9px 18px #20325214}.inspo-swatch{height:92px;display:grid;place-items:center;border:4px solid #fff;border-radius:8px;box-shadow:inset 0 0 0 1px #1e2a3e0a,0 2px 5px #1d2a4212;overflow:hidden}.inspo-swatch span{display:grid;place-items:center;width:30px;height:30px;border:1px solid #ffffffa6;border-radius:50%;background:#fff8;color:#f8f9fb;text-shadow:0 1px 4px #1f2c43aa;font-size:20px}.inspo-card b,.inspo-card small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.inspo-card b{margin:8px 2px 2px;color:#384760;font:600 12px 'Bricolage Grotesque',system-ui,sans-serif}.inspo-card small{margin:0 2px;color:#8d9199;font-size:9px}.inspo-swatch.bloom{background-color:#9ca8bc;background-image:radial-gradient(ellipse at 22% 28%,#f4d8e4 0 5px,transparent 5.8px),radial-gradient(ellipse at 30% 22%,#c84179 0 4px,transparent 4.8px),radial-gradient(ellipse at 77% 73%,#f2d1df 0 5px,transparent 5.8px),linear-gradient(120deg,transparent 47%,#5a6c8c 48% 51%,transparent 52%);background-size:56px 56px,58px 58px,61px 61px,48px 48px}.inspo-swatch.gingham{background-color:#c84179;background-image:linear-gradient(90deg,#f8e6ee88 50%,transparent 50%),linear-gradient(#f8e6ee88 50%,transparent 50%);background-size:20px 20px}.inspo-swatch.ditsy{background-color:#cfb3b2;background-image:radial-gradient(#f0f2f5 2px,transparent 2.8px),radial-gradient(#a65f69 2px,transparent 3px),radial-gradient(#d6dde5 1.5px,transparent 2.5px);background-position:0 0,12px 13px,21px 3px;background-size:28px 28px}.inspo-swatch.stripe{background:repeating-linear-gradient(90deg,#3b5176 0 12px,#d4dbe3 12px 18px,#97a3b7 18px 23px,#e9edf1 23px 30px)}.inspo-swatch.patchwork{background-color:#c84179;background-image:linear-gradient(45deg,#9aa5b8 25%,transparent 25%,transparent 75%,#9aa5b8 75%),linear-gradient(45deg,#c84179 25%,transparent 25%,transparent 75%,#c84179 75%),linear-gradient(45deg,#d6b8b6 25%,transparent 25%,transparent 75%,#d6b8b6 75%);background-position:0 0,14px 14px,28px 0;background-size:28px 28px}
@media(max-width:1050px){.inspiration{grid-template-columns:1fr;gap:17px}.inspiration-copy p{max-width:480px}.inspiration-grid{gap:9px}}
@media(max-width:600px){.inspiration{margin:0 0 24px;padding:18px 15px;border-radius:8px;gap:14px}.inspiration-copy h2{font-size:23px}.inspiration-grid{grid-template-columns:repeat(5,118px);overflow-x:auto;padding:1px 1px 7px;margin-right:-5px;scroll-snap-type:x mandatory;scrollbar-width:thin}.inspo-card{scroll-snap-align:start}.inspo-swatch{height:83px}}
.brand-footer{margin-top:34px;padding:15px 4px 4px;border-top:1px solid #e1e5e9;color:#8f949c;text-align:center;font-size:11px;letter-spacing:.15px}

/* Pattern-to-fabric match explanations */
.match-hints{margin:12px 0;padding:13px 15px;border:1px solid #c84179;border-radius:8px;background:#f2f4f6;color:#882850;font-size:12px;line-height:1.55}.match-hints ul{margin:8px 0;padding-left:19px}.match-hints li+li{margin-top:5px}.match-hints small{color:#b7356b}

/* Personal fit memory, project estimates, and returned remnants */
.fit-memory{display:grid;gap:9px;margin-top:14px;padding:14px;border:1px solid #dde2ea;border-radius:8px;background:#f7f8fb}.fit-memory label b,.fit-memory label small{display:block}.fit-memory label small{margin-top:4px;color:#7b818b;font-size:11px}.fit-memory textarea{width:100%;resize:vertical;padding:10px;border:1px solid #dbdfe7;border-radius:9px;color:#29364b;background:#fff;font:inherit;font-size:12px;line-height:1.5}.project-cost-edit{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:13px;padding-top:13px;border-top:1px solid #e8ebf1}.project-cost-edit label{font-size:11px;color:#57657d}.project-cost-edit input{width:112px;padding:7px 9px;border:1px solid #dbdfe7;border-radius:8px}.project-cost-edit span{font-size:11px;color:#435575}.remnant-note{margin-top:10px;padding:10px 12px;border:1px solid #dae0eb;border-radius:9px;background:#eff3f9;color:#475a7b;font-size:12px}

/* Scrap inventory and reservation conflict review */
.stack-list{display:grid;gap:7px;margin:14px 0}.stack-list .lined{align-items:center;padding:10px 0}.scrap-size{display:block;color:#7b818b;font-size:11px}
.cut-checklist{display:grid;gap:11px;margin:18px 0;padding:14px;border:1px solid #dce1ea;border-radius:8px;background:#f5f7fa}.cut-checklist label{display:flex;align-items:flex-start;gap:9px;color:#3d4c65;font-size:13px;line-height:1.45}.cut-checklist input{width:auto;margin:2px 0 0}
@media print{body *{visibility:hidden!important}.modal-backdrop,.modal-backdrop *{visibility:visible!important}.modal-backdrop{position:absolute;inset:0;padding:0;background:#fff;backdrop-filter:none}.modal{width:100%;max-width:none;max-height:none;overflow:visible;border:0;box-shadow:none}.modal-foot,.modal-head .x,.modal button{display:none!important}.modal-body{overflow:visible!important}}

.layout-preview{max-height:420px;overflow:auto;padding:10px;border:1px solid #dee2ea;border-radius:8px;background:#f8f9fb}.layout-preview svg{display:block;max-width:100%;height:auto;max-height:390px;margin:0 auto}.project-cost-edit{gap:10px}.project-cost-edit label{display:inline-flex;align-items:center;gap:5px}

/* Beginner mode keeps core tasks visible while hiding optional advanced form sections. */
.beginner-mode details{display:none!important}

.brand-logo-mark{width:72px;height:72px;object-fit:contain;flex:0 0 72px;display:block}

/* AI analysis report */
.ai-h{font-size:15px;margin:18px 0 8px;color:#273752}
.ai-h:first-child{margin-top:0}
.ai-sec{background:#f4f5f8;border-radius:10px;padding:14px 16px;margin-bottom:6px}
.ai-row{display:flex;gap:10px;padding:5px 0;border-bottom:1px solid #e1e5eb}
.ai-row:last-child{border-bottom:0}
.ai-key{flex:0 0 150px;color:#535f74;font-size:13px}
.ai-val{flex:1;font-size:14px}
.ai-unknown{color:#878a90;font-style:italic}
.ai-badge{display:inline-block;font-size:11px;font-weight:600;background:#dbe0e9;color:#273752;border-radius:8px;padding:2px 10px;margin-left:8px;vertical-align:middle}
.ai-badge-ai{background:#f0cbda;color:#7a143e}
.ai-variant{margin-bottom:12px}
.ai-variant-name{font-weight:700;margin-bottom:4px}
.ai-reqs{margin:4px 0 0 18px;padding:0}
.ai-reqs li{margin:3px 0;font-size:14px}
.ai-line{padding:7px 0;border-bottom:1px solid #e1e5eb;font-size:14px}
.ai-line:last-child{border-bottom:0}
.ai-sub{font-size:13px;color:#535f74;margin-top:3px}
.ai-okline{color:#1f478c;font-weight:600}
.ai-short{color:#b3261e;font-weight:600}
.ai-yield-ok{background:#e5eaf3;border-radius:10px;padding:12px 14px}
.ai-yield-short{background:#fbe9e7;border-radius:10px;padding:12px 14px}
.ai-edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
/* Pattern review popup: every section is visible; numbered steps separated by rules */
#ai-simple-plan h3{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-size:19px;margin:26px 0 8px;padding-top:18px;border-top:1px solid var(--border);color:#1e2a3e}
#ai-simple-plan>h3:first-child{margin-top:0;padding-top:0;border-top:0}
#ai-simple-plan h3.ai-h{font-family:inherit;font-size:14px;margin:16px 0 8px;padding-top:0;border-top:0;color:#273752}
#ai-simple-plan table{width:100%;border-collapse:collapse;font-size:13px}
#ai-simple-plan th{text-align:left;color:#657692;font-size:12px;padding:9px 6px;border-bottom:1px solid #e2e5eb;vertical-align:bottom}
#ai-simple-plan td{padding:8px 6px;border-bottom:1px solid #eceff3;vertical-align:top}
@media(max-width:600px){.ai-edit-grid{grid-template-columns:1fr}.ai-key{flex-basis:120px}}

/* Startup view choice */
.view-choice-backdrop{z-index:250;cursor:default}
.view-choice-modal{width:min(620px,100%)}
.view-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.view-option{display:flex;align-items:flex-start;gap:11px;padding:16px;border:1px solid #dbdfe7;border-radius:8px;background:#fff;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}
.view-option:has(input:checked){border-color:#45597b;background:#f0f3f8;box-shadow:0 0 0 1px #45597b}
.view-option input{flex:0 0 auto;margin:3px 0 0;accent-color:#263d64}
.view-option b,.view-option small{display:block}
.view-option b{color:#213250;font-size:14px}
.view-option small{margin-top:5px;color:#66748b;font-size:12px;line-height:1.5}
.remember-view{display:flex;align-items:center;gap:9px;margin-top:17px;color:#384760;font-size:13px;cursor:pointer}
.remember-view input{accent-color:#263d64}
@media(max-width:600px){.view-options{grid-template-columns:1fr}.view-option{padding:13px}}

.fit-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.fit-compare article,.result-panel{padding:12px;border:1px solid #dde2ea;border-radius:10px;background:#fff}.fit-compare article p{margin:6px 0 0;white-space:pre-wrap}.result-panel{margin-top:14px;background:#f5f7fa}.result-panel h3{margin:0 0 8px}.result-panel .lined{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid #e4e8ef;font-size:12px}.result-panel .note{margin-bottom:0}
.quilt-design.variable{width:max-content;max-width:100%;overflow:auto}.quilt-design.variable span{min-height:22px;aspect-ratio:auto}
/* Local-first quilt block and fitting tools. */
.quilt-design{display:grid;grid-template-columns:repeat(var(--quilt-cols),minmax(28px,54px));gap:3px;width:max-content;max-width:100%;margin:14px 0}.quilt-design span{display:grid;place-items:center;aspect-ratio:1;border:1px solid #828b9a;border-radius:4px;background:#e1e6ef;color:#2c3951;font-weight:700}.quilt-design span:nth-child(3n+2){background:#e2e7ec}.fit-input-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.fit-input-grid input[type=number],.fit-input-grid input[type=file]{max-width:100%}.fit-delta{margin:6px 0 10px;padding:10px;border:1px solid #d5ddea;border-radius:9px;background:#f0f3f9}.fit-delta>div{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}.fit-delta span,.fit-measure{display:inline-block;padding:4px 7px;border-radius:999px;background:#e8ecf3;color:#3e4e69;font-size:11px}.fit-measure{margin:6px 4px 0 0}.fit-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:9px}.fit-photos figure{margin:0}.fit-photos img,.fit-photo-preview{display:block;width:100%;max-height:220px;object-fit:contain;border-radius:8px;background:#eef1f4}.fit-photos figcaption{margin-top:3px;color:#5e6c85;font-size:11px}
.angled-cut svg{display:block;width:min(220px,100%);height:130px;margin:10px auto 0;overflow:visible}.angled-cut polygon{stroke-linejoin:round}
.peer-qr{display:flex;justify-content:center;margin:0 auto 12px;max-width:260px;padding:10px;background:#fff;border:1px solid #dde2ea;border-radius:8px}.peer-qr svg{width:100%;height:auto}.peer-tools{display:flex;gap:7px;flex-wrap:wrap}.peer-camera{display:block;width:100%;max-height:60vh;object-fit:contain;background:#1b212c;border-radius:8px}
@media(max-width:600px){.fit-compare{grid-template-columns:1fr}}

.nav-subtabs{display:flex;gap:8px;flex-wrap:wrap;margin:-13px 0 20px}
@media(max-width:870px){
  .main>.topbar{grid-template-areas:"brand actions"}
  .main>.topbar>.nav{display:none!important}
  .mobile-nav{display:flex!important}
}

/* Review popup: what the pattern needs (read-only). */
.ai-need{padding:10px 0;border-bottom:1px solid var(--line,#d8dfe6)}
.ai-need:last-of-type{border-bottom:0}
.ai-need-head{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.ai-need-head b{font-size:1rem;min-width:9em}
.ai-need-head span{font-size:.95rem}
.ai-need-stash{margin-top:4px;font-size:.88rem}
.ai-need-ok{color:#234277}
.ai-need-short{color:#9a1c50}
.ai-need-sub{margin:14px 0 2px;font-size:.95rem}

/* Pattern tissue skin (2026-10-19): tracing-paper ground, drafting-ink blue, pattern-marking magenta.
   Structural motif: dashed cut lines and notches, as printed on sewing pattern pieces. */
:root{--ink:#1c2a44;--draft:#1f3a6b;--draft2:#2f5196;--marker:#c2185b;--tissue:#eceff3;--paper:#f8f9fb;--rule:#cfd6e0;--cut:#8796ad;--muted:#5d6a7e;--green:var(--draft);--green2:var(--draft2);--mint:#e3e9f4;--border:var(--rule);--cream:var(--paper);--gold:var(--marker);color:var(--ink)}
body{background:var(--tissue);background-image:linear-gradient(#1f3a6b0a 1px,transparent 1px),linear-gradient(90deg,#1f3a6b0a 1px,transparent 1px);background-size:24px 24px}
h1,h2,h3,.brand-name{font-family:'Bricolage Grotesque',system-ui,sans-serif;letter-spacing:-.02em}
.page-head h1{font-weight:800;letter-spacing:-.035em;color:var(--ink)}
.eyebrow{text-transform:none;letter-spacing:0;font-size:12px;font-weight:600;color:var(--muted)}
.sidebar{background:var(--paper);border-right:1px dashed var(--cut)}
.topbar{background:var(--paper);border-bottom:1px dashed var(--cut)}
.brand-icon{border-radius:4px;background:var(--draft);position:relative}
.brand-icon::after{content:'';position:absolute;right:-5px;top:50%;width:8px;height:8px;background:var(--marker);transform:translateY(-50%) rotate(45deg)}
.nav .nav-btn{border-radius:6px}
.nav .nav-btn.active{background:var(--mint);color:var(--draft);box-shadow:inset 3px 0 0 var(--marker)}
.btn{border-radius:6px}
.btn.primary{background:var(--draft);border-color:var(--draft)}
.btn.primary:hover{background:var(--draft2)}
.hero{background:var(--draft);background-image:linear-gradient(#ffffff14 1px,transparent 1px),linear-gradient(90deg,#ffffff14 1px,transparent 1px);background-size:24px 24px;border:0;border-radius:8px;box-shadow:none;outline:2px dashed #ffffff55;outline-offset:-12px}
:focus-visible{outline:2px solid var(--marker);outline-offset:2px}
.modal{border-radius:8px}
.brand-logo-mark{width:44px;height:44px;flex:0 0 44px;border-radius:4px}
@media (max-width:560px){.brand small{display:none}.brand-name{font-size:21px}.top-actions .pill{display:none}}
.nav-ico svg{display:block}
.nav .nav-btn span.nav-ico{display:grid;place-items:center}
.mobile-nav .nav-btn{position:relative;border-radius:0}
.mobile-nav .nav-btn.active{background:none;color:var(--draft)}
.mobile-nav .nav-btn.active::before{content:'';position:absolute;top:-6px;left:50%;width:10px;height:10px;background:var(--marker);transform:translateX(-50%) rotate(45deg)}
.mobile-nav{border-top:1px dashed var(--cut);box-shadow:none;background:var(--paper)}
.topbar .nav .nav-btn.active,.nav .nav-btn.active{background:none;box-shadow:inset 0 -2px 0 var(--marker);border-radius:0;color:var(--draft)}

.folder-name{font-weight:600;color:#3b3f46}.browse-list .settings-item{padding:10px 0}.browse-list code{font-size:11px;word-break:break-all}

/* Getting-started tour */
.tour-layer{position:fixed;inset:0;z-index:9000;pointer-events:none}
.tour-layer.dim{background:rgba(20,28,45,.45)}
.tour-ring{position:fixed;border-radius:12px;box-shadow:0 0 0 3px var(--gold,#c84179),0 0 0 9999px rgba(20,28,45,.45);transition:all .2s ease;pointer-events:none}
.tour-card{position:fixed;width:min(340px,calc(100vw - 32px));background:var(--cream,#fff);color:inherit;border-radius:14px;padding:16px 18px;box-shadow:0 12px 40px rgba(0,0,0,.25);pointer-events:auto;transition:top .2s,left .2s}
.tour-card.centered{top:50%;left:50%;transform:translate(-50%,-50%)}
.tour-card h3{margin:6px 0 6px}.tour-card p{margin:0 0 14px;line-height:1.45}
.tour-progress{display:flex;gap:5px}.tour-progress i{flex:1;height:4px;border-radius:2px;background:rgba(0,0,0,.12)}.tour-progress i.on{background:var(--gold,#c84179)}
.tour-actions{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}.tour-actions span{display:flex;gap:6px}
@media (prefers-reduced-motion:reduce){.tour-ring,.tour-card{transition:none}}

/* Pattern requirement rows */
.req-rows{display:grid;gap:8px;margin-bottom:8px}
.req-row{display:grid;grid-template-columns:minmax(70px,1fr) minmax(110px,1.4fr) 80px 80px minmax(100px,1.2fr) 32px;gap:6px;align-items:center}
.req-row input,.req-row select{min-width:0}
.req-row .x{width:32px;height:32px}
.req-text{margin-top:10px}.req-text summary{cursor:pointer;color:var(--muted)}
@media (max-width:640px){.req-row{grid-template-columns:1fr 1fr 32px}.req-row [data-k="size"]{grid-column:1/3}.req-row [data-req-del]{grid-row:1;grid-column:3}}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px}.hero .btn.ghost{background:transparent;color:white;border-color:rgba(255,255,255,.6)}
/* 2027 pass: one bold accent, state-signalling motion, visible focus */
.hero [data-action="what-can-i-make"]{background:var(--marker);border-color:var(--marker);color:#fff;font-weight:600;box-shadow:0 6px 18px #c2185b55;transition:transform .15s ease,box-shadow .15s ease}
.hero [data-action="what-can-i-make"]:hover{transform:translateY(-2px);box-shadow:0 10px 24px #c2185b66}
.btn{transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.is-busy{position:relative;color:transparent!important;pointer-events:none}
.btn.is-busy::after{content:"";position:absolute;inset:0;margin:auto;width:14px;height:14px;border:2px solid currentColor;border-color:var(--muted) transparent var(--muted) transparent;border-radius:50%;animation:sm-spin .7s linear infinite}
@keyframes sm-spin{to{transform:rotate(360deg)}}
:focus-visible{outline:3px solid var(--marker);outline-offset:2px}
input:invalid:not(:placeholder-shown),select:invalid,textarea:invalid:not(:placeholder-shown){border-color:#c62828;box-shadow:0 0 0 2px #c6282822}
@media (prefers-reduced-motion:reduce){.btn,.hero [data-action="what-can-i-make"]{transition:none}.btn:hover,.btn:active,.hero [data-action="what-can-i-make"]:hover{transform:none}.btn.is-busy::after{animation-duration:2s}}
/* Hero buttons keep readable colors on hover (generic .btn:hover sets a light bg) */
.hero .btn[data-action="what-can-i-make"]:hover:not(:disabled),.hero .btn[data-action="what-can-i-make"]:focus-visible{background:#a3134b;border-color:#a3134b;color:#fff}
.hero .btn.ghost:hover:not(:disabled){background:rgba(255,255,255,.14);color:#fff;border-color:#fff}

/* Narrow phones (≤480px): keep the wordmark and page titles from being squeezed by neighbours. */
@media(max-width:480px){
 .main>.topbar{grid-template-columns:minmax(0,1fr);grid-template-areas:"brand" "actions" "nav"}
 .main>.topbar>.top-actions{justify-content:flex-start;flex-wrap:wrap}
 .page-head{flex-direction:column;align-items:flex-start}
}