:root{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#292c2a;background:#f7f8f6;font-synthesis:none;--muted:#727775;--line:#dde2db;--green:#366b5b;--green-dark:#174c40;--card:#fff;--soft:#f0f4ee}
*{box-sizing:border-box}
body{margin:0}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
button{cursor:pointer}
input,select{min-width:0}
input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.shell{max-width:1320px;margin:auto;padding-left:26px;padding-right:26px}
.topbar{background:#fff;border-bottom:1px solid var(--line)}
.topinner{min-height:71px;display:flex;gap:25px;align-items:center;justify-content:space-between}
.brand{font-weight:800;letter-spacing:-.8px;font-size:21px;display:flex;align-items:center;white-space:nowrap}
.brand .muted{color:#8e9890}
.brandmark{display:grid;grid-template-columns:repeat(2,7px);gap:3px;margin-right:13px;transform:rotate(-10deg)}
.brandmark i{display:block;width:7px;height:7px;background:#4f9474;border-radius:1px}
.brandmark i:nth-child(2){background:#c27c70}
.brandmark i:nth-child(3){background:#e3b95d}
.brandmark i:nth-child(4){background:#4f7499}
.nav{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.nav a{font-size:13px;color:#616c65;white-space:nowrap;padding:25px 0 22px;border-bottom:3px solid transparent}
.nav a:hover{color:var(--green-dark)}
.nav a[aria-current=page]{border-bottom-color:#417960;color:#193f32;font-weight:650}
.main{padding-top:36px;min-height:calc(100vh - 140px);padding-bottom:56px}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(28px,3.5vw,43px);letter-spacing:-1.3px;margin-bottom:10px;line-height:1.15}
h2{font-size:19px;letter-spacing:-.3px}
.eyebrow{font-size:11px;letter-spacing:1.7px;font-weight:750;color:var(--green);margin-bottom:13px}
.hero{margin:29px 0 35px}
.hero p,.tool-heading p{color:#6f7771;font-size:15px;line-height:1.6;max-width:690px;margin-bottom:0}
.tool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px}
.tool-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:15px;overflow:hidden;min-width:0;transition:transform .15s,border-color .15s,box-shadow .15s}
.tool-card:hover{transform:translateY(-3px);border-color:#b7c9bb;box-shadow:0 8px 26px #193e2611}
.tool-card .tool-art{height:166px;margin:12px 12px 20px;border-radius:9px;position:relative;overflow:hidden}
.tool-caption{font-size:10px;font-weight:750;letter-spacing:1.5px;color:#728779;margin:0 23px 12px}
.tool-card h2{margin:0 23px 8px;font-size:21px}
.tool-card p{font-size:14px;line-height:1.55;color:#67736c;margin:0 23px 25px;flex:1}
.open-tool{color:var(--green);font-size:13px;font-weight:750;margin:0 23px 24px}
.open-tool span{margin-left:5px}
.art-threads{display:flex;gap:12px;align-items:center;justify-content:center;background:#f1f2ea}
.art-threads span{height:90px;width:38px;border-radius:9px 9px 12px 12px;box-shadow:inset 0 8px 0 #fff4,inset 0 -12px 0 #0001;transform:rotate(-13deg)}
.art-threads span:nth-child(1){background:#d59884}
.art-threads span:nth-child(2){background:#d2af63;transform:rotate(-5deg)}
.art-threads span:nth-child(3){background:#5a8e86;transform:rotate(6deg)}
.art-threads span:nth-child(4){background:#8075a5;transform:rotate(-4deg)}
.art-threads span:nth-child(5){background:#b15b66;transform:rotate(12deg)}
.art-gradient{background:#edf0f3;display:flex;align-items:center;justify-content:center}
.gradient-circle{width:144px;height:144px;border-radius:50%;background:conic-gradient(#df564e,#e5bd59,#8dba6b,#59a4bc,#8079b8,#bd69a6,#df564e);mask:radial-gradient(circle,transparent 0 37%,#000 38%);-webkit-mask:radial-gradient(circle,transparent 0 37%,#000 38%)}
.sample-mini{position:absolute;width:48px;height:48px;left:calc(50% - 24px);top:calc(50% - 24px);border-radius:50%;background:#e3a554;box-shadow:0 0 0 5px #fff}
.art-count{display:flex;align-items:center;justify-content:center;gap:22px;background:#f2eee6}
.stitch-grid{display:grid;grid-template-columns:repeat(4,32px);gap:1px}
.stitch-grid span{width:32px;height:32px;text-align:center;line-height:30px;color:#b66c6c;border:1px solid #d7cbbb;font-size:31px;font-weight:300}
.ruler-mini{font-weight:700;font-size:15px;color:#806c58;padding:12px;border:1px dashed #b5a08a;transform:rotate(-4deg)}
.tool-heading{display:flex;justify-content:space-between;gap:20px;align-items:end;margin:8px 0 29px}
.text-link{color:var(--green);font-size:13px;font-weight:700;white-space:nowrap;padding-bottom:5px}
.toolbar input[type=search],.toolbar select,.fields input,.common-controls input,.common-controls select,.hex-label input{padding:11px 13px;border:1px solid #ccd3cd;border-radius:8px;background:white;color:#262c26;font-size:15px}
.footnote,.small-muted{font-size:12px;color:#7e8580;line-height:1.6;margin-top:12px}
.footer{display:flex;justify-content:space-between;gap:18px;color:#8b9690;font-size:12px;padding-top:23px;padding-bottom:30px;border-top:1px solid var(--line)}
.hex-label{font-size:12px;color:#69736c;display:flex;flex-direction:column;gap:5px}
.hex-label input{max-width:120px;font-variant-numeric:tabular-nums;text-transform:uppercase}
@media(max-width:1020px){.nav{gap:14px}.tool-grid{gap:12px}.count-layout{grid-template-columns:1fr}.count-help{max-width:none}.matcher-card{gap:20px}}
@media(max-width:760px){.shell{padding-left:14px;padding-right:14px}.topinner{display:block;padding-top:14px}.nav{overflow:auto;flex-wrap:nowrap;gap:20px}.nav a{padding:16px 0 12px}.main{padding-top:20px}.hero{margin:20px 0 24px}.tool-grid{grid-template-columns:1fr}.tool-card .tool-art{height:140px}.tool-heading{display:block}.tool-heading .text-link{display:inline-block;margin-top:14px}.matcher-card{grid-template-columns:1fr;padding:14px}.count-panel,.count-help{padding:14px}.fields{grid-template-columns:repeat(2,minmax(0,1fr))}.color-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}}
@media(max-width:390px){.color-grid{grid-template-columns:1fr}.fields{grid-template-columns:1fr}.matches{grid-template-columns:1fr}.footer{display:block}.toolbar select{flex-basis:100%}}
@media(max-width:760px){.count-layout{grid-template-columns:minmax(0,1fr)}.common-controls{min-width:0}.common-controls label{min-width:0;max-width:100%}.common-controls select{max-width:100%}.calc-tabs{max-width:100%}}
[hidden]{display:none!important}
.topinner{gap:10px}
.logout-form{margin-left:auto;flex:none}
.logout-button{padding:8px 12px;border:1px solid #d5ddd5;border-radius:7px;background:transparent;color:var(--green);cursor:pointer;font:inherit;font-size:13px}
@media(max-width:760px){.login-layout{grid-template-columns:1fr;min-height:auto}.login-card{padding:23px}.login-side{display:none}.logout-form{position:absolute;right:15px;top:12px}.topinner{position:relative;padding-right:70px}.logout-button{padding:6px}.nav{margin-top:4px}}

.brand-icon{height:30px;width:30px;border-radius:7px;display:block;margin-right:11px;flex:none}
.footer{column-gap:20px;row-gap:6px}.footer span{display:block}


/* === Mobile navigation and touch-friendly layouts (v3.1) === */
@media (max-width: 760px) {
  :root { -webkit-text-size-adjust: 100%; }
  .shell { padding-inline: 13px; }
  .topinner {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    min-height: 59px;
    padding-top: 9px;
    padding-bottom: 9px;
    padding-right: 13px;
    gap: 10px;
  }
  .brand { font-size: 20px; letter-spacing: -.65px; min-width: 0; }
  .brand-icon { width: 30px; height: 30px; margin-right: 9px; }
  .logout-form { margin-left: auto; position: static; flex: none; }
  .logout-button { min-height: 40px; padding: 9px 11px; }
  .nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0 5px env(safe-area-inset-bottom, 0px);
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 16px #253c2710;
    overflow: visible;
  }
  .nav a {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-width: 0;
    min-height: 60px;
    padding: 10px 3px;
    margin: -1px 0 0;
    border: 0;
    border-top: 3px solid transparent;
    font-size: clamp(10px, 2.75vw, 12px);
    line-height: 1.25;
    white-space: normal;
  }
  .nav a[aria-current=page] { border-top-color: var(--green); }
  .main { min-height: 0; padding-top: 19px; padding-bottom: 92px; }
  .footer { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
  body[data-page="login"] .main { padding-bottom: 32px; }
  body[data-page="login"] .footer { padding-bottom: 22px; }
  h1 { font-size: clamp(26px, 7.4vw, 32px); letter-spacing: -.8px; }
  .hero { margin: 8px 0 20px; }
  .hero p, .tool-heading p { font-size: 14px; line-height: 1.5; }
  .eyebrow { margin-bottom: 9px; }
  .tool-heading { margin: 0 0 17px; }
  .tool-heading .text-link { margin-top: 8px; min-height: 33px; }
  .tool-grid { grid-template-columns: 1fr; gap: 10px; }
  .tool-card {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    column-gap: 10px;
    padding: 10px;
    border-radius: 12px;
  }
  .tool-card .tool-art {
    grid-column: 1;
    grid-row: 1 / 5;
    margin: 0;
    width: 92px;
    height: 100%;
    min-height: 104px;
    border-radius: 9px;
  }
  .tool-caption { grid-column: 2; grid-row: 1; font-size: 9px; margin: 2px 0 4px; }
  .tool-card h2 { grid-column: 2; grid-row: 2; font-size: 17px; line-height: 1.3; margin: 0 0 4px; }
  .tool-card p { grid-column: 2; grid-row: 3; font-size: 12px; line-height: 1.35; margin: 0 0 7px; }
  .open-tool { grid-column: 2; grid-row: 4; margin: 0 0 2px; font-size: 12px; }
  .art-threads { gap: 4px; }
  .art-threads span { width: 13px; height: 57px; border-radius: 4px 4px 6px 6px; }
  .gradient-circle { width: 82px; height: 82px; }
  .sample-mini { width: 29px; height: 29px; left: calc(50% - 14.5px); top: calc(50% - 14.5px); box-shadow: 0 0 0 3px #fff; }
  .art-count { gap: 3px; flex-wrap: wrap; }
  .stitch-grid { grid-template-columns: repeat(4, 15px); }
  .stitch-grid span { width: 15px; height: 15px; line-height: 13px; font-size: 15px; }
  .ruler-mini { font-size: 10px; padding: 5px; }
  .toolbar { align-items: stretch; }
  .toolbar .search { flex: 1 0 100%; width: 100%; }
  .toolbar select { flex: 1 1 160px; min-height: 46px; }
  .toolbar .owned { flex: 0 1 auto; min-height: 44px; }
  .toolbar input[type=search], .toolbar select, .fields input,
  .common-controls input, .common-controls select, .hex-label input {
    font-size: 16px;
    min-height: 46px;
  }
  .color-grid { grid-template-columns: 1fr; gap: 8px; }
  .color-item { min-height: 65px; }
  .quantity-controls button { min-width: 39px; min-height: 44px; }
  .picker-preview-row { flex-wrap: wrap; }
  .matcher-card { display: grid; grid-template-columns: 1fr; gap: 17px; padding: 12px; border-radius: 12px; }
  .sv-field { aspect-ratio: auto; height: clamp(165px, 49vw, 215px); }
  .hue-range { height: 24px; }
  .matches { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .match-item { display: flex; flex-direction: column; gap: 7px; padding: 9px; }
  .match-swatch { width: 42px; height: 32px; }
  .match-go { min-height: 38px; width: 100%; font-size: 12px; }
  .results-head { margin-bottom: 10px; }
  .count-layout { gap: 13px; }
  .count-panel, .count-help { padding: 13px; border-radius: 12px; }
  .calc-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; overflow: visible; }
  .calc-tab { min-height: 50px; white-space: normal; font-size: 12px; line-height: 1.2; padding: 9px 4px; }
  .common-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px; margin-bottom: 17px; }
  .common-controls label:first-child { grid-column: 1 / -1; }
  .common-controls label { width: 100%; }
  .common-controls input, .common-controls select { width: 100%; max-width: 100%; }
  .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 15px 0; }
  .fields label { font-size: 12px; }
  .result { padding: 14px; }
  .result strong.large { font-size: 22px; }
  .login-card { padding: 19px; }
  .login-form .primary-button { min-height: 48px; }
}
@media (max-width: 355px) {
  .brand { font-size: 17px; }
  .brand-icon { width: 26px; height: 26px; }
  .tool-card { grid-template-columns: 75px minmax(0, 1fr); }
  .tool-card .tool-art { width: 75px; }
  .fields { grid-template-columns: 1fr; }
  .common-controls { grid-template-columns: 1fr; }
  .common-controls label:first-child { grid-column: auto; }
  .matches { grid-template-columns: 1fr; }
  .color-item { grid-template-columns: 38px minmax(0,1fr); row-gap: 7px; }
  .color-item .swatch { width: 38px; height: 38px; }
  .quantity-controls { grid-column: 2; grid-row: 2; justify-self: start; }
}