/* Commerce Suite — Editorial design system (Meadow) Single source of truth for all mockup pages. Becomes the app's app.css on port. Fonts + Bootstrap Icons are linked per-page in . */ :root{ --paper:#faf9f6; --tile:#fff; --rail:#f3f1ec; --ink:#1c1a15; --ink-2:#5f5a50; --ink-3:#a39d90; --line:#e5e1d8; --line-2:#d8d3c7; --green:#2f7d5b; --green-deep:#1f5b41; --green-wash:#eef4ef; --amber:#b07512; --amber-wash:#f6eed9; --red:#bb443d; --red-wash:#f6e5e3; --blue:#3667a6; --serif:'Fraunces',Georgia,serif; --sans:'Inter',system-ui,sans-serif; --mono:'Spline Sans Mono',ui-monospace,monospace; --radius:12px; } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} body{font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.5} a{color:inherit;text-decoration:none} .tnum{font-variant-numeric:tabular-nums} .serif{font-family:var(--serif)} .mono{font-family:var(--mono)} .kbd{font-family:var(--mono);font-size:11px;color:var(--ink-2);background:var(--rail);border:1px solid var(--line-2);border-radius:5px;padding:1px 6px} .mock-badge{position:fixed;bottom:16px;right:16px;z-index:99;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;padding:6px 11px;border-radius:999px} /* ---- shell ---- */ .toprule{height:3px;background:var(--green)} .shell{max-width:1180px;margin:0 auto;padding:0 36px} nav.bar{display:flex;align-items:center;gap:32px;height:74px;border-bottom:1px solid var(--line)} .wordmark{font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:-.01em;display:flex;align-items:center;gap:9px;white-space:nowrap} .wordmark .mk{width:11px;height:21px;background:var(--green);border-radius:2px 2px 6px 6px;display:inline-block} .links{display:flex;gap:23px;margin-left:4px} .links a{font-size:14px;color:var(--ink-2);position:relative;padding:4px 0;white-space:nowrap} .links a:hover{color:var(--ink)} .links a.on{color:var(--ink);font-weight:500} .links a.on::after{content:'';position:absolute;left:0;right:0;bottom:-27px;height:2px;background:var(--green)} .navright{margin-left:auto;display:flex;align-items:center;gap:16px} .navright .icon-link{color:var(--ink-2);font-size:18px} .navright .icon-link:hover{color:var(--ink)} .store{font-size:13px;color:var(--ink-2);display:flex;align-items:center;gap:7px;white-space:nowrap} .store .pulse{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--green-wash)} .cta{font-size:13px;font-weight:500;color:var(--green-deep);border:1px solid var(--line-2);padding:8px 14px;border-radius:9px} .cta:hover{background:#fff;border-color:var(--green)} /* ---- page head + sub-nav ---- */ .eyebrow{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:8px} .eyebrow.tick::before{content:'';width:16px;height:1px;background:var(--green)} .page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:30px 0 6px} .page-head h1{font-family:var(--serif);font-size:30px;font-weight:500;letter-spacing:-.01em} .page-head .sub{font-size:14px;color:var(--ink-2);margin-top:5px} .page-head .actions{display:flex;gap:9px} .breadcrumb{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-2);padding-top:26px} .breadcrumb a{color:var(--green-deep)} .breadcrumb .sep{color:var(--ink-3);font-family:var(--mono)} .subnav{display:flex;gap:7px;flex-wrap:wrap;padding:18px 0 8px;border-bottom:1px solid var(--line);margin-bottom:22px} .subnav a{font-size:13px;color:var(--ink-2);padding:6px 13px;border-radius:999px;white-space:nowrap} .subnav a:hover{background:var(--rail);color:var(--ink)} .subnav a.on{background:var(--green);color:#fff} .subnav a .count{font-family:var(--mono);font-size:11px;opacity:.7;margin-left:5px} .section{padding-bottom:64px} /* ---- buttons ---- */ .btn{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:13.5px;font-weight:500;border:1px solid var(--line-2);background:var(--tile);color:var(--ink);padding:9px 15px;border-radius:9px;cursor:pointer;text-decoration:none} .btn:hover{background:var(--rail)} .btn.primary{background:var(--green);color:#fff;border-color:var(--green)} .btn.primary:hover{background:var(--green-deep)} .btn.ghost{border-color:transparent;background:transparent;color:var(--ink-2)} .btn.ghost:hover{color:var(--ink);background:var(--rail)} .btn.sm{padding:6px 11px;font-size:12.5px} .btn .arr{font-family:var(--mono)} /* ---- tags / badges ---- */ .tag{font-size:11px;font-weight:600;padding:3px 10px;border-radius:999px;white-space:nowrap;display:inline-block} .tag.c{background:var(--red-wash);color:var(--red)} .tag.w{background:var(--amber-wash);color:var(--amber)} .tag.ok{background:var(--green-wash);color:var(--green-deep)} .tag.neutral{background:var(--rail);color:var(--ink-2)} .tag.info{background:#e7eef8;color:var(--blue)} .dot{width:8px;height:8px;border-radius:50%;display:inline-block} .dot.c{background:var(--red)} .dot.w{background:var(--amber)} .dot.g{background:var(--green)} /* ---- metric strip ---- */ .stat-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:22px} .stat{background:var(--tile);border:1px solid var(--line);border-radius:var(--radius);padding:15px 17px} .stat .k{font-size:13px;color:var(--ink-2)} .stat .v{font-family:var(--serif);font-size:29px;font-weight:500;line-height:1;margin-top:7px} .stat .v.c{color:var(--red)} .stat .v.w{color:var(--amber)} .stat .v.g{color:var(--green)} .stat .d{font-family:var(--mono);font-size:11.5px;margin-top:5px} .d.up,.d.good{color:var(--green)} .d.down{color:var(--red)} .d.flat{color:var(--ink-3)} /* ---- cards ---- */ .card{background:var(--tile);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px} .card h3{font-size:15px;font-weight:500;margin-bottom:2px} .card .sub{font-size:13px;color:var(--ink-2);margin-bottom:14px} .card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px} .grid-2{display:grid;grid-template-columns:1.5fr 1fr;gap:16px} .grid-2.even{grid-template-columns:1fr 1fr} /* ---- list rows (attention / generic) ---- */ .rows{border-top:1px solid var(--line)} .rows.boxed{border:1px solid var(--line);border-radius:var(--radius);border-top:1px solid var(--line);overflow:hidden;background:var(--tile)} .row-item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)} .rows.boxed .row-item{padding:14px 18px} .row-item:last-child{border-bottom:none} .row-item .idx{font-family:var(--serif);font-size:22px;color:var(--ink-3);font-weight:500;width:28px} .row-item .desc b{font-size:15px;font-weight:500;display:block} .row-item .desc span{font-size:13px;color:var(--ink-2)} .row-item .fix{font-size:13px;color:var(--green-deep);font-weight:500;white-space:nowrap;display:inline-flex;gap:7px;align-items:center} .row-item .fix .arr{font-family:var(--mono);transition:transform .15s} .row-item:hover .fix .arr{transform:translateX(3px)} /* ---- table ---- */ .table{width:100%;border-collapse:collapse;background:var(--tile);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden} .table th{text-align:left;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:500;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--paper)} .table td{padding:13px 16px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:middle} .table tr:last-child td{border-bottom:none} .table tbody tr:hover{background:#fbfaf7} .table .mono{font-family:var(--mono);font-size:12.5px;color:var(--ink-2)} .table .right{text-align:right} .table .thumb{width:34px;height:34px;border-radius:7px;background:var(--rail)} .table .muted{color:var(--ink-2)} /* ---- toolbar / search / filter tabs ---- */ .toolbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap} .toolbar .spacer{flex:1} .search{display:flex;align-items:center;gap:9px;background:var(--tile);border:1px solid var(--line);border-radius:9px;padding:9px 13px;color:var(--ink-3);font-size:13.5px;min-width:220px} .search input{border:none;background:transparent;font:inherit;font-size:13.5px;color:var(--ink);outline:none;width:100%} .filter{display:flex;gap:7px;flex-wrap:wrap} .filter .tab{font-size:13px;color:var(--ink-2);background:var(--tile);border:1px solid var(--line);padding:7px 13px;border-radius:999px;cursor:pointer} .filter .tab:hover{border-color:var(--line-2)} .filter .tab.on{background:var(--green);color:#fff;border-color:var(--green)} .filter .tab .count{font-family:var(--mono);font-size:11px;opacity:.75;margin-left:5px} /* ---- forms ---- */ .field{margin-bottom:16px} .field>label{display:block;font-size:12.5px;color:var(--ink-2);margin-bottom:6px} .field>label .charcount{float:right;font-family:var(--mono);font-size:11px;color:var(--ink-3)} .field>label .charcount.ok{color:var(--green)} .field>label .charcount.over{color:var(--amber)} input[type=text],input[type=number],input[type=email],input[type=search],textarea,select{ width:100%;font:inherit;font-size:13.5px;color:var(--ink);background:var(--tile); border:1px solid var(--line-2);border-radius:9px;padding:10px 12px;outline:none} input:focus,textarea:focus,select:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--green-wash)} textarea{min-height:80px;resize:vertical;font-family:var(--sans)} .hint{font-size:12px;color:var(--ink-3);margin-top:6px} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px} .token{font-family:var(--mono);font-size:11px;background:var(--rail);color:var(--ink-2);padding:2px 7px;border-radius:6px;display:inline-block;margin:3px 4px 0 0} /* ---- toggle switch ---- */ .switch-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)} .switch-row:last-child{border-bottom:none} .switch-row .meta b{font-size:14px;font-weight:500;display:block} .switch-row .meta span{font-size:12.5px;color:var(--ink-2)} .switch{position:relative;width:38px;height:22px;flex:none;cursor:pointer} .switch input{display:none} .switch .slider{position:absolute;inset:0;background:var(--line-2);border-radius:999px;transition:.15s} .switch .slider::before{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:3px;left:3px;transition:.15s} .switch input:checked + .slider{background:var(--green)} .switch input:checked + .slider::before{transform:translateX(16px)} /* ---- progress ---- */ .progress{height:7px;background:var(--rail);border-radius:4px;overflow:hidden} .progress>i{display:block;height:100%;background:var(--green);border-radius:4px} .progress.amber>i{background:var(--amber)} .progress.red>i{background:var(--red)} .bar-row{display:grid;grid-template-columns:120px 1fr 34px;align-items:center;gap:10px;font-size:13px;margin-top:10px} .bar-row .num{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);text-align:right} /* ---- score circle + health track ---- */ .scorecircle{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-size:18px;font-weight:500} .scorecircle.a{background:var(--green-wash);color:var(--green-deep)} .scorecircle.b{background:#e7f0e1;color:#4a6b2a} .scorecircle.c{background:var(--amber-wash);color:var(--amber)} .scorecircle.f{background:var(--red-wash);color:var(--red)} .track .scale{position:relative;height:8px;border-radius:5px;background:linear-gradient(90deg,#e7c3bf,#f0dcb6 48%,#cfe4d6)} .track .scale .pin{position:absolute;top:-7px;transform:translateX(-50%);width:3px;height:22px;background:var(--ink);border-radius:2px} .track .ticks{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-top:8px} /* ---- SERP + social preview ---- */ .serp{background:var(--tile);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px} .serp .url{font-size:12.5px;color:var(--green-deep)} .serp .title{font-size:16px;color:#1a4fb4;margin:3px 0} .serp .desc{font-size:12.5px;color:var(--ink-2);line-height:1.5} .social-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--tile)} .social-card .img{height:120px;background:var(--rail);display:grid;place-items:center;color:var(--ink-3);font-size:26px} .social-card .body{padding:11px 13px} .social-card .domain{font-size:11px;color:var(--ink-3);text-transform:uppercase} .social-card .title{font-size:14px;font-weight:500;margin:2px 0} .social-card .desc{font-size:12.5px;color:var(--ink-2)} /* ---- two-pane editor ---- */ .two{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;align-items:start} .two-side{position:sticky;top:20px;display:flex;flex-direction:column;gap:16px} /* ---- code block (JSON-LD etc) ---- */ .code{font-family:var(--mono);font-size:12px;background:#20201b;color:#e7e3d8;border-radius:var(--radius);padding:16px;overflow:auto;line-height:1.6;white-space:pre} .code .k{color:#9cc79f} .code .s{color:#e6c07b} /* ---- empty / activity ---- */ .empty{text-align:center;padding:56px 20px;color:var(--ink-2)} .empty i{font-size:34px;color:var(--ink-3)} .empty h3{font-family:var(--serif);font-size:19px;font-weight:500;margin:12px 0 4px;color:var(--ink)} .ledger .led-item{position:relative;padding:0 0 20px 22px} .ledger .led-item::before{content:'';position:absolute;left:0;top:5px;width:7px;height:7px;border-radius:50%;background:var(--green)} .ledger .led-item::after{content:'';position:absolute;left:3px;top:14px;bottom:-2px;width:1px;background:var(--line)} .ledger .led-item:last-child::after{display:none} .ledger .led-item .t{font-family:var(--mono);font-size:11px;color:var(--ink-3)} .ledger .led-item p{font-size:13.5px;margin-top:2px} .ledger .led-item p em{font-style:normal;color:var(--ink-2)} /* ---- inline modal showcase (faux viewport) ---- */ .modal-demo{min-height:420px;background:rgba(28,26,21,.42);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;padding:24px} .modal-card{background:var(--tile);border-radius:var(--radius);width:100%;max-width:520px;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.18)} .modal-card .mh{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)} .modal-card .mh h3{font-family:var(--serif);font-size:18px;font-weight:500} .modal-card .mb{padding:18px 20px} .modal-card .mf{display:flex;justify-content:flex-end;gap:9px;padding:14px 20px;border-top:1px solid var(--line)} /* ---- auth (onboarding) ---- */ .auth-wrap{min-height:100vh;display:grid;place-items:center;padding:24px} .auth-card{width:380px;background:var(--tile);border:1px solid var(--line);border-radius:16px;padding:30px} .auth-card .logo{width:46px;height:46px;border-radius:13px;background:var(--green);color:#fff;display:grid;place-items:center;font-size:24px;margin:0 auto 14px} /* ---- footer tools strip ---- */ .tools{border-top:1px solid var(--line);padding:22px 0 46px;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .tools .lab{font-size:13px;color:var(--ink-3);margin-right:14px} .tools a{font-size:14px;color:var(--ink);margin-right:22px;display:inline-flex;align-items:baseline;gap:6px} .tools a:hover{color:var(--green-deep)} .tools a sup{font-family:var(--mono);font-size:10px;color:var(--ink-3)} .tools a .bad{color:var(--red)} /* Floating "open externally" button — shown only inside Shopify's embedded iframe */ .fab-external{position:fixed;bottom:24px;right:24px;z-index:50;width:46px;height:46px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:19px;box-shadow:0 6px 18px rgba(31,91,65,.28);transition:background .15s,transform .15s} .fab-external:hover{background:var(--green-deep);transform:translateY(-2px)} /* ===== compatibility layer: re-theme pre-redesign class vocabulary (editorial) ===== */ :root{ --bg-primary:#faf9f6; --bg-secondary:#ffffff; --bg-tertiary:#f3f1ec; --bg-hover:#ece8df; --accent:#2f7d5b; --accent-hover:#1f5b41; --success:#2f7d5b; --success-dark:#e3f1ea; --warning:#b07512; --error:#bb443d; --error-dark:#f6e5e3; --text-primary:#1c1a15; --text-secondary:#5f5a50; --border:#e5e1d8; --border-light:#d8d3c7; } body{background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.5} .container{max-width:1180px;margin:0 auto;padding:24px 36px} .container-fluid{padding:24px} h1{font-family:var(--serif);font-weight:500;font-size:30px;letter-spacing:-.01em;color:var(--ink)} h2{font-family:var(--serif);font-weight:500;font-size:20px;color:var(--ink)} h3{font-family:var(--serif);font-weight:500;font-size:16px;color:var(--ink)} .subtitle{color:var(--ink-2);font-size:14px;margin-bottom:1.5rem} .app-nav{background:var(--tile);border-bottom:1px solid var(--line);padding:0 36px;height:74px;display:flex;align-items:center;gap:32px} .app-nav .logo{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--ink)} .app-nav .nav-links{display:flex;gap:23px} .app-nav .nav-link{color:var(--ink-2);font-size:14px;padding:4px 0} .app-nav .nav-link:hover,.app-nav .nav-link.active{color:var(--ink)} .app-nav .nav-right{margin-left:auto;display:flex;align-items:center;gap:14px} .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:22px} .stat{background:var(--tile);border:1px solid var(--line);border-radius:var(--radius);padding:15px 17px;text-align:left} .stat-value{font-family:var(--serif);font-size:29px;font-weight:500;color:var(--ink)} .stat-label{color:var(--ink-2);font-size:13px} .stat--success .stat-value{color:var(--green)} .stat--warning .stat-value{color:var(--amber)} .stat--error .stat-value{color:var(--red)} .stat--info .stat-value{color:var(--blue)} .stat--gold .stat-value{color:var(--amber)} .stat--loading{opacity:.6} .loading-spinner{display:inline-block;width:20px;height:20px;border:2px solid var(--line);border-top-color:var(--green);border-radius:50%;animation:spin 1s linear infinite} .btn--primary{background:var(--green);color:#fff;border-color:var(--green)} .btn--primary:hover{background:var(--green-deep)} .btn--secondary{background:var(--tile);color:var(--ink);border:1px solid var(--line-2)} .btn--secondary:hover{background:var(--rail)} .btn--success{background:var(--green);color:#fff} .btn--warning{background:var(--amber);color:#fff} .btn--danger{background:var(--red);color:#fff} .btn--ghost{background:transparent;color:var(--ink-2);border:1px solid var(--line)} .btn--ghost:hover{background:var(--rail);color:var(--ink)} .btn--sm{padding:6px 11px;font-size:12.5px} .btn--lg{padding:12px 22px;font-size:15px} .btn:disabled{opacity:.5;cursor:not-allowed} .card-header{display:flex;align-items:center;gap:1rem;padding:1rem;cursor:pointer} .card-header:hover{background:var(--rail)} .card-thumbnail{width:80px;height:80px;object-fit:cover;border-radius:8px;background:var(--rail);flex-shrink:0} .card-info{flex:1;min-width:0} .card-title{font-size:1rem;font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .card-meta{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap} .card-content{padding:1rem;border-top:1px solid var(--line)} .card-actions{display:flex;gap:.75rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line)} .cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px} .card.expanded{grid-column:1/-1} .card.has-issues{border-color:var(--red)} .badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:600} .badge--product{background:#e7eef8;color:var(--blue)} .badge--collection{background:var(--green-wash);color:var(--green-deep)} .badge--banner{background:var(--amber-wash);color:var(--amber)} .badge--active,.badge--success{background:var(--green-wash);color:var(--green-deep)} .badge--draft{background:var(--amber-wash);color:var(--amber)} .badge--archived{background:var(--rail);color:var(--ink-2)} .badge--error{background:var(--red-wash);color:var(--red)} .filter-tabs{display:flex;gap:7px;margin-bottom:1.25rem;flex-wrap:wrap} .filter-tab{padding:7px 13px;border-radius:999px;background:var(--tile);border:1px solid var(--line);color:var(--ink-2);font-size:13px;cursor:pointer} .filter-tab:hover{border-color:var(--line-2);color:var(--ink)} .filter-tab.active{background:var(--green);color:#fff;border-color:var(--green)} .filter-tab .count{margin-left:5px;opacity:.7;font-family:var(--mono);font-size:11px} .toolbar-right{margin-left:auto} .toolbar-left{display:flex;gap:10px;align-items:center} .search-box{position:relative;flex:1;max-width:400px} .search-box input{width:100%;background:var(--tile);border:1px solid var(--line-2);border-radius:9px;padding:10px 12px 10px 36px;font-size:13.5px;color:var(--ink)} .search-box input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-wash)} .search-box .search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--ink-3)} .table-img{width:50px;height:50px;object-fit:cover;border-radius:6px} .table-container{overflow:auto} .stats-row{display:flex;gap:14px;flex-wrap:wrap} .form-group{margin-bottom:16px} .form-label{display:block;font-size:12.5px;color:var(--ink-2);margin-bottom:6px} .form-input,.form-textarea,.form-select{width:100%;background:var(--tile);border:1px solid var(--line-2);color:var(--ink);padding:10px 12px;border-radius:9px;font-size:13.5px;font-family:var(--sans)} .form-input:focus,.form-textarea:focus,.form-select:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-wash)} .form-textarea{min-height:90px;resize:vertical} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .form-hint,.form-help{font-size:12px;color:var(--ink-3);margin-top:6px} .char-count{font-family:var(--mono);font-size:11px;color:var(--ink-3)} .score{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;font-family:var(--serif);font-weight:500;font-size:15px} .score--a{background:var(--green-wash);color:var(--green-deep)} .score--b{background:#e7f0e1;color:#4a6b2a} .score--c{background:var(--amber-wash);color:var(--amber)} .score--d{background:#f6e7da;color:#9a5a12} .score--f{background:var(--red-wash);color:var(--red)} .score-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-bottom:22px} .score-card{background:var(--tile);border:1px solid var(--line);border-radius:var(--radius);padding:18px;text-align:center} .score-circle{width:64px;height:64px;border-radius:50%;display:inline-grid;place-items:center;font-family:var(--serif);font-size:22px;font-weight:500;margin:0 auto} .score-label{color:var(--ink-2);font-size:13px;margin-top:8px} .toggle-group{display:flex;flex-direction:column} .toggle-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)} .toggle-item{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)} .toggle-label{font-size:14px;font-weight:500} .toggle-desc{font-size:12.5px;color:var(--ink-2)} .toggle{position:relative;display:inline-block;width:38px;height:22px;flex:none} .toggle input{opacity:0;width:0;height:0} .toggle-slider{position:absolute;inset:0;background:var(--line-2);border-radius:999px;cursor:pointer;transition:.15s} .toggle-slider::before{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:3px;left:3px;transition:.15s} .toggle input:checked + .toggle-slider{background:var(--green)} .toggle input:checked + .toggle-slider::before{transform:translateX(16px)} .progress-bar{height:100%;background:var(--green);border-radius:4px;transition:width .3s} .progress-bar--success{background:var(--green)} .progress-bar--warning{background:var(--amber)} .progress-bar--error{background:var(--red)} .progress-bar-wrap{margin-bottom:1rem} .progress-track{height:8px;background:var(--rail);border-radius:4px;overflow:hidden} .progress-fill{height:100%;background:var(--green);border-radius:4px} .progress-label{font-size:12.5px;color:var(--ink-2);margin-bottom:6px} .modal-overlay{position:fixed;inset:0;background:rgba(28,26,21,.45);display:flex;align-items:center;justify-content:center;z-index:100} .modal{background:var(--tile);border:1px solid var(--line);border-radius:var(--radius);max-width:600px;width:90%;max-height:90vh;overflow:auto} .modal-content{background:var(--tile);border-radius:var(--radius)} .modal-header{padding:1rem 1.25rem;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between} .modal-title{font-family:var(--serif);font-size:18px;font-weight:500} .modal-close{background:none;border:none;font-size:1.3rem;color:var(--ink-3);cursor:pointer} .modal-body{padding:1.25rem} .modal-footer,.modal-actions{padding:1rem 1.25rem;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:.75rem} .toast{position:fixed;bottom:2rem;right:2rem;padding:1rem 1.25rem;border-radius:10px;background:var(--tile);border:1px solid var(--line);color:var(--ink);z-index:1000;box-shadow:0 10px 30px rgba(0,0,0,.12);animation:slideIn .3s ease} .toast.success{border-color:var(--green);background:var(--green-wash)} .toast.error{border-color:var(--red);background:var(--red-wash)} .spinner{width:16px;height:16px;border:2px solid var(--rail);border-top-color:var(--green);border-radius:50%;animation:spin 1s linear infinite;display:inline-block} .empty-state{text-align:center;padding:4rem 2rem;color:var(--ink-2)} .empty-state svg{width:64px;height:64px;margin-bottom:1rem;opacity:.4} .error-box{background:var(--red-wash);border:1px solid var(--red);padding:1rem;border-radius:10px;margin-bottom:1.5rem;color:var(--ink)} @keyframes spin{to{transform:rotate(360deg)}} @keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}} /* In-app "How to use this" — hover/focus popover that overlays content (per page) */ .howto{position:relative;display:inline-block;margin:0 0 20px;z-index:20} .howto-trigger{cursor:help;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--tile);font-family:var(--sans);font-weight:500;font-size:0.86rem;color:var(--ink-2);white-space:nowrap} .howto-trigger:hover,.howto-trigger:focus-visible{color:var(--ink);border-color:var(--line-2);outline:none} .howto-trigger .bi-question-circle{color:var(--green)} .howto-body{position:absolute;top:calc(100% + 8px);left:0;width:380px;max-width:min(380px,90vw);padding:14px 18px 16px;background:var(--tile);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 12px 34px rgba(28,26,21,.16);font-size:0.86rem;color:var(--ink-2);line-height:1.55;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .14s ease,transform .14s ease,visibility .14s;pointer-events:none} .howto:hover .howto-body,.howto:focus-within .howto-body{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto} .howto-body h4{font-size:0.74rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2);margin:14px 0 6px} .howto-body h4:first-child{margin-top:0} .howto-body ol,.howto-body ul{margin:0 0 8px 1.15rem} .howto-body li{margin-bottom:4px} .howto-body code{background:var(--rail);padding:1px 5px;border-radius:4px;font-family:var(--mono);font-size:0.82em} .howto-body strong{color:var(--ink)} .howto-body p{margin:0 0 8px}