/* Brick Relay 2026 design layer — shared across all pages */
:root{--navy:#13294b;--orange:#f26b1d;--orange2:#ff7f3a;--ink:#0f172a;--muted:#64748b;--bg:#f8fafc;--line:#e2e8f0;--card:#fff;--radius:16px;--shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.06);--shadow-lg:0 2px 4px rgba(15,23,42,.04),0 16px 40px rgba(15,23,42,.10)}
html{-webkit-font-smoothing:antialiased}
body{font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;background:var(--bg)!important;color:var(--ink);letter-spacing:-.005em;line-height:1.6}
h1,h2,h3{letter-spacing:-.02em;font-weight:700}
.wrap{max-width:1180px;padding-left:28px;padding-right:28px}
header{background:rgba(255,255,255,.82)!important;backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
header img{height:64px}
@media (max-width:860px){header img{height:52px!important}}
.who-bar{border-top:1px solid var(--line);background:rgba(255,255,255,.92)}
.who-bar .wrap{max-width:1180px;margin:0 auto;padding:8px 28px 10px;display:flex;justify-content:flex-end;box-sizing:border-box}
.who{color:var(--muted);font-size:.88rem}a.who{text-decoration:none}a.who:hover{color:var(--navy);text-decoration:underline;text-underline-offset:2px}
.btn{border-radius:999px!important;font-weight:600!important;padding:11px 22px;transition:all .18s ease}
.btn-o{background:var(--orange)!important;color:#fff!important;box-shadow:0 6px 16px rgba(242,107,29,.28)!important}
.btn-o:hover{background:var(--orange2)!important;transform:translateY(-1px);box-shadow:0 10px 22px rgba(242,107,29,.32)!important}
.btn-g{border:1px solid var(--line)!important;background:#fff!important;color:var(--ink)!important}
.btn-g:hover{border-color:var(--navy)!important;background:#fff!important;color:var(--navy)!important}
.card,.feat,.step,.kpi{background:var(--card);border:1px solid var(--line)!important;border-radius:var(--radius)!important;box-shadow:var(--shadow)!important}
.card{padding:40px!important}
.main{padding:72px 20px!important;min-height:calc(100vh - 72px);align-items:flex-start!important}
input,textarea,select{font-family:inherit!important;border:1px solid var(--line)!important;border-radius:10px!important;padding:12px 14px!important;background:#fff;transition:border-color .15s,box-shadow .15s}
.pw-wrap input{padding-right:64px!important}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--orange)!important;box-shadow:0 0 0 4px rgba(242,107,29,.15)}
label{font-weight:500;color:var(--ink)!important;margin-top:16px!important}
.err{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c!important;padding:10px 14px;border-radius:10px;font-size:.92rem}
.foot a,.pw-toggle{color:var(--orange)!important;text-decoration:none!important;font-weight:600}
section{scroll-margin-top:80px}
/* dashboard */
.dash{max-width:1180px;margin:0 auto;padding:48px 28px}
.dash-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:32px}
.dash-head h1{margin:0;font-size:1.9rem}.dash-head p{margin:4px 0 0;color:var(--muted)}
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.tile{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}
.tile .k{color:var(--muted);font-size:.85rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em}
.tile .v{font-size:1.8rem;font-weight:700;margin-top:6px}
.tile h3{margin:0 0 8px;font-size:1.05rem}.tile p{margin:0;color:var(--muted)}
@media(max-width:640px){.wrap{padding-left:18px;padding-right:18px}.card{padding:28px!important}.main{padding:40px 14px!important}.dash{padding:32px 18px}}
/* ---- Sync dashboard ---- */
.health{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:linear-gradient(135deg,#13294b,#1d3a66);color:#fff;border-radius:20px;padding:28px 32px;box-shadow:var(--shadow-lg);margin-bottom:32px}
.health h2{margin:0;font-size:1.35rem;color:#fff}.health h2.tone-ok{color:#86efac}.health h2.tone-err{color:#fca5a5}.health p{margin:4px 0 0;color:rgba(255,255,255,.72)}.health .sync-status.ok{color:#86efac;font-weight:600;margin:6px 0 0}.health .sync-status.err{color:#fecaca;font-weight:600}.health .stat b.sync-when{font-size:1.15rem;line-height:1.3}.health .stat .sync-date,.health .stat .sync-time{display:block}
.health .meter{height:8px;width:220px;max-width:100%;background:rgba(255,255,255,.15);border-radius:99px;overflow:hidden;margin-top:14px}.health .meter span{display:block;height:100%;background:var(--orange);border-radius:99px}
.health .stats{display:flex;gap:32px}.health .stat b{display:block;font-size:1.6rem}.health .stat small{color:rgba(255,255,255,.65);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}

/* Sync failure — short label + expandable details */
.sync-fail{margin:6px 0 0}
.sync-fail>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.sync-fail>summary::-webkit-details-marker{display:none}
.health .sync-fail-label,.health .sync-status.err{color:#fecaca;font-weight:600}
.health .sync-fail-more{color:rgba(255,255,255,.85);font-size:.78rem;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.health .sync-fail[open] .sync-fail-more{opacity:.7}
.sync-fail-detail{margin:10px 0 0;padding:12px 14px;border-radius:10px;background:rgba(0,0,0,.28);color:#fff;font:12px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;max-height:220px;overflow:auto}
.sec-title{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 16px}.sec-title h2{margin:0;font-size:1.15rem}.sec-title span{color:var(--muted);font-size:.9rem}
.channels{display:grid;gap:32px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));margin-bottom:48px}
.ch-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;display:flex;flex-direction:column;gap:14px;transition:box-shadow .18s,transform .18s;overflow:hidden;position:relative;z-index:0;min-height:220px;min-width:0;box-sizing:border-box;max-width:100%}
.ch-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);z-index:2}
.ch-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap;width:100%;min-width:0;box-sizing:border-box}
.ch-brand{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 140px;max-width:100%;overflow:hidden}
.ch-brand h3{margin:0;font-size:1.05rem;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ch-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:.85rem;flex:0 0 auto}
.ch-logo{flex:0 0 auto;width:52px;height:36px;padding:5px;border:1px solid var(--line);border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ch-logo img{display:block;max-height:22px;max-width:40px;width:auto;height:auto;object-fit:contain}
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:99px;font-size:.72rem;font-weight:600;white-space:nowrap;flex:0 0 auto;background:#f1f5f9;margin:0;max-width:100%;box-sizing:border-box}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
.pill.on{background:#ecfdf5;color:#047857}.pill.off{background:#f1f5f9;color:#64748b}
.ch-desc{margin:0;color:var(--muted);font-size:.9rem;line-height:1.45;overflow-wrap:anywhere;max-width:100%}
.ch-meta{display:flex;justify-content:space-between;gap:12px;font-size:.88rem;color:var(--muted);border-top:1px solid var(--line);padding-top:14px;margin-top:auto;flex-wrap:wrap;max-width:100%;box-sizing:border-box}.ch-meta b{color:var(--ink);font-weight:600}
.ch-actions{display:flex;gap:10px}.ch-actions .btn{flex:1;text-align:center;padding:10px 14px;font-size:.92rem}
.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none!important;transform:none!important}
.log{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.log-row{display:grid;grid-template-columns:90px 130px 1fr auto;gap:16px;align-items:center;padding:14px 22px;border-top:1px solid var(--line);font-size:.92rem}.log-row:first-child{border-top:0}
.log-row .t{color:var(--muted)}.log-row .d{color:var(--muted)}
@media(max-width:640px){.health{padding:22px}.health .stats{gap:20px}.log-row{grid-template-columns:1fr auto;gap:4px 12px}.log-row .t,.log-row .d{grid-column:1}}

/* SEIL Apps product branding */
footer.site-foot,footer{padding:30px 0;color:var(--muted);font-size:14px;text-align:center}
footer .foot-br{height:34px;margin-bottom:10px;display:inline-block}
footer .seil-byline{display:flex;align-items:center;justify-content:center;gap:10px;margin:10px 0 8px;color:var(--ink);font-size:.95rem}
footer .seil-logo{height:40px;width:auto;margin:0;display:inline-block;vertical-align:middle;border-radius:8px}
footer .foot-legal{margin:8px 0 0;line-height:1.5}
footer .foot-nav{margin:6px 0}
footer .foot-nav a{color:var(--orange)}

/* Profile */
.profile-grid{display:grid;gap:24px;max-width:720px}
.profile-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px 32px}
.profile-card h2{margin:0 0 6px;font-size:1.15rem}
.profile-card .hint{margin:0 0 18px;color:var(--muted);font-size:.9rem}
.shop-status{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:99px;font-size:.8rem;font-weight:600;background:#f1f5f9;color:var(--muted)}
.shop-status.on{background:#ecfdf5;color:#047857}

.btn-danger{background:#fff!important;color:#b91c1c!important;border:1px solid #fca5a5!important}.btn-danger:hover{background:#fef2f2!important;border-color:#ef4444!important;color:#991b1b!important}.btn-danger:disabled{opacity:.45;cursor:not-allowed}

/* Mobile: keep top nav clear of browser chrome / address bar */
@supports (padding: max(0px)) {
  header{padding-top:max(12px, env(safe-area-inset-top, 0px))!important}
}
@media (max-width: 860px) {
  header{padding-top:max(56px, env(safe-area-inset-top, 0px))!important}
  header .wrap{height:auto!important;min-height:0;padding-top:10px;padding-bottom:12px;align-items:stretch;flex-wrap:wrap;flex-direction:column;gap:12px}
  header .nav{flex-wrap:wrap;row-gap:8px;width:100%}
}


/* Dashboard tabs */
.dash-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 28px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.dash-tabs a{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:10px;font-size:.92rem;font-weight:600;color:var(--muted);min-height:42px}
.dash-tabs a:hover{color:var(--navy);background:#f8fafc}
.dash-tabs a.active{background:var(--navy);color:#fff}
.kpi-row{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin:0 0 28px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 22px}
.kpi .k{color:var(--muted);font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.kpi .v{font-size:1.55rem;font-weight:700;margin-top:6px;color:var(--navy)}
.add-form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px 32px;max-width:640px}

/* Custom file picker (Add Product photo) */
.file-pick{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:8px}
.file-pick input[type=file]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.file-pick .file-pick-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;font-weight:600;font-family:inherit;font-size:.92rem;padding:10px 20px;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--navy);transition:all .18s ease}
.file-pick .file-pick-btn:hover{border-color:var(--navy);background:#f8fafc}
.file-pick .file-pick-btn:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 4px rgba(242,107,29,.15)}
.file-pick .file-pick-name{color:var(--muted);font-size:.9rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.file-pick .file-pick-name.has-file{color:var(--ink);font-weight:500}
/* Pricing / billing (20261025stripe1) */
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;max-width:820px}
.plan-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px 30px;display:flex;flex-direction:column}
.plan-card.featured{border:2px solid var(--navy);box-shadow:var(--shadow-lg)}
.plan-card.current{border-color:#10b981}
.plan-card h2{margin:0 0 6px;font-size:1.15rem;color:var(--navy)}
.plan-price{font-size:2rem;font-weight:800;color:var(--navy);margin:4px 0 16px}
.plan-card ul{list-style:none;margin:0 0 22px;padding:0;color:var(--muted);font-size:.93rem;flex:1}
.plan-card li{padding:6px 0 6px 22px;position:relative}
.plan-card li:before{content:"✓";position:absolute;left:0;color:var(--orange);font-weight:700}
.plan-card form{margin:0}
.plan-cta{width:100%;text-align:center;box-sizing:border-box}
.plan-badge{position:absolute;top:-12px;right:20px;background:var(--navy);color:#fff;font-size:.75rem;font-weight:700;padding:4px 12px;border-radius:999px}
.plan-hint{color:var(--muted);font-size:.88rem}
.billing-note{background:#f1f5f9;border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin-bottom:20px;color:var(--ink);font-size:.92rem;max-width:820px;box-sizing:border-box}
.billing-manage{margin-top:22px}

/* Rosetta Stone master-source tiles */
.ro-tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.ro-tile{margin:0}
.ro-tile button{width:100%;min-height:84px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:#fff;color:var(--navy);font-family:inherit;cursor:pointer;transition:all .18s ease}
.ro-tile button:hover{border-color:var(--navy)}
.ro-tile button span{font-size:.8rem;color:var(--muted)}
.ro-tile.on button{background:var(--navy);border-color:var(--navy);color:#fff}
.ro-tile.on button span{color:rgba(255,255,255,.8)}
.ro-tile.soon button{opacity:.55;background:#f8fafc}
.ro-tile button:disabled{cursor:default}