/* The marketing site's look for every signed-in screen (dashboard, login, signup, phone page, admin).
   Same tokens as site/assets/site.css (near-black, #161616 cards, one green, square uppercase buttons,
   Barlow Condensed headings, the green slash), copied here rather than imported: app/web never loads site CSS.
   Load it LAST so it wins over styles.css / app.css / auth.css / dashboard.css. */
:root {
  --bg: #0a0a0a; --bg-2: #1d1d1d; --card: #161616; --card-2: #1d1d1d; --line: #2a2a2a;
  --text: #ffffff; --muted: #a3a3a3; --faint: #8a8a8a;
  --green: #53d337; --green-dim: rgba(83, 211, 55, .12); --red: #ff4d4d; --gold: #f5b400;
  --radius: 6px;
  --head: "Barlow Condensed", "Barlow", system-ui, sans-serif;
  --body: "Barlow", system-ui, -apple-system, sans-serif;
}
body, body.app { background: var(--bg); color: var(--text); font-family: var(--body); }
h1, h2, h3 { font-family: var(--head); font-weight: 800; text-transform: uppercase; letter-spacing: 0; }

/* buttons: the site's .btn (5px corners, uppercase, tracked, bold) */
.btn { border-radius: 5px; text-transform: uppercase; letter-spacing: .03em; font-family: var(--body); font-weight: 700;
  box-shadow: none; transform: none !important; }
.btn-primary { background: var(--green); color: #000; border-color: var(--green); }
.btn-primary:hover { background: #64e04a; }
.btn-ghost { background: var(--bg); border-color: var(--line); color: var(--text); }
.btn-ghost:hover { background: var(--card); border-color: #3a3a3a; }

/* surfaces: flat cards with hairlines, small corners */
.panel, .box, .card, .app .panel, .app .acct, .app .tile, .app .item, .app .card-prev, .app .modal-box, .acct-list, .board, .tier-t {
  border-radius: 6px !important; background: var(--card); border-color: var(--line); box-shadow: none; }
input, select, textarea { border-radius: 5px; }

/* page titles: big condensed uppercase, like the site's section titles, with a green eyebrow rule */
.app .main h1, .app [data-pane] > h1, .app .pane-head h1, .app .sch-top h1 { font: 800 clamp(2rem, 4vw, 2.6rem)/1 var(--head); text-transform: uppercase; margin: 0 0 6px; }
.app [data-pane] > h1::before, .app .pane-head h1::before, .app .sch-top h1::before {
  content: ""; display: block; width: 36px; height: 4px; background: var(--green); margin-bottom: 12px; transform: skewX(-24deg); }
.app .pane-sub { color: var(--muted); font-size: .95rem; }
.app .sec, .app h2.sec { font: 800 1.25rem/1.1 var(--head); text-transform: uppercase; letter-spacing: .01em; }

/* sidebar: the site's header bar colors, square tabs with a green edge */
.app .side { background: #0e0f10; border-color: var(--line); }
@media (min-width: 861px) {
  .app .side .brand { font: 800 1.35rem var(--head); text-transform: none; display: flex; align-items: center; gap: 10px; text-decoration: none; }
}
.app .tab { border-radius: 5px; font-family: var(--body); font-weight: 600; }
.app .tab:hover { background: var(--card); }
.app .tab.sel { background: var(--card); color: var(--text); box-shadow: inset 3px 0 0 var(--green); }
.app .tab.sel .ic { color: var(--green); }
.app .tab .n { background: var(--green); color: #000; font-weight: 700; }
@media (max-width: 860px) {
  .app .side { background: rgba(10, 10, 10, .96); }
  .app .tab.sel { box-shadow: inset 0 3px 0 var(--green); }
}

/* the site's diagonal green slash, faint, behind the top of every pane (desktop only, never over content) */
@media (min-width: 861px) {
  .app .main { position: relative; isolation: isolate; }
  .app .main::before {
    content: ""; position: absolute; z-index: -1; top: 0; right: 0; width: 340px; height: 260px; pointer-events: none;
    background: linear-gradient(115deg, transparent 0 58%, rgba(83, 211, 55, .14) 58% 64%, transparent 64% 70%, rgba(83, 211, 55, .06) 70% 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent); mask-image: linear-gradient(to bottom, #000 40%, transparent);
  }
}

/* small things that read as "app" rather than "site" */
.app .seg button, .app .filters button { border-radius: 5px; }
.app .plan-badge { border-radius: 3px; text-transform: uppercase; letter-spacing: .04em; }
.app .trial { border-radius: 6px; }
.news, .modal-box { border-radius: 8px; }

/* setup checklist and inline action buttons: same square uppercase buttons as the site */
.app .setup button, .app .item .acts button { border-radius: 5px; text-transform: uppercase; letter-spacing: .03em; font-weight: 700; font-size: .75rem; }

/* login / signup / reset: the site's header bar and hero slash, so signing up feels like the same site */
.site-bar { display: flex; align-items: center; gap: 24px; height: 64px; padding: 0 clamp(16px, 4vw, 48px); background: #0e0f10; border-bottom: 1px solid var(--line); }
.site-logo { display: flex; align-items: center; gap: 10px; font: 800 1.3rem var(--head); color: var(--text); text-decoration: none; }
.site-bar nav { margin-left: auto; display: flex; gap: 22px; }
.site-bar nav a { color: var(--muted); font-weight: 600; font-size: .95rem; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.site-bar nav a:hover { color: var(--text); }
.auth-page { position: relative; isolation: isolate; overflow-x: hidden; }
.auth-page::before { content: ""; position: fixed; z-index: -1; top: 64px; right: -10vw; width: 55vw; height: 100vh; pointer-events: none;
  background: linear-gradient(115deg, transparent 0 46%, rgba(83, 211, 55, .16) 46% 50%, transparent 50% 56%, rgba(83, 211, 55, .05) 56% 100%); }
.auth-page .auth { padding-top: 40px; }
.auth-page .auth h1 { font-size: 2rem !important; }
@media (max-width: 520px) { .site-bar nav { gap: 14px; } .site-bar nav a { font-size: .9rem; } .auth-page::before { display: none; } }

/* ============================================================== batch 10: docs/DASHBOARD-RESTYLE.md */
:root { --green-hover: #41a52b; --r-chip: 4px; --r-btn: 5px; --r-card: 6px; --display: var(--head); }

/* #1 one radius system: cards 6, buttons 5, chips 4; nothing rounder except avatars */
.app .panel, .app .acct-list, .app .board, .app .rec-top, .app .rec-chart, .app .empty-state, .app .fr-opt, .app .fr-list li,
.app .setup, .app .plat, .app .modal-box, .app .item, .app .card-prev, .app .trial, .app .celebrate, .app .firstrun, .designer, .news,
.app .tile, .app .acct, .app .tier-t, .app .look-opt, .app .drop { border-radius: var(--r-card) !important; }
.app .btn, .app button.btn { border-radius: var(--r-btn); }

/* #3 filters are square uppercase chips; segmented toggles are one bordered box */
.app .ptabs button, .app .filters button { height: 30px; padding: 0 10px; border-radius: var(--r-chip); background: transparent;
  border: 1px solid var(--line); color: var(--muted); font: 700 .74rem var(--body); text-transform: uppercase; letter-spacing: .06em; }
.app .ptabs button.on, .app .filters button.on { background: var(--green); border-color: var(--green); color: #000; }
.app .ptabs .n, .app .filters .n { opacity: 1; color: inherit; font-weight: 700; }
.app .seg { background: transparent; border: 1px solid var(--line); border-radius: var(--r-btn); padding: 0; gap: 0; overflow: hidden; }
.app .seg button { border-radius: 0; padding: 0 14px; min-height: 40px; font: 700 .8rem var(--body); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.app .seg button + button { border-left: 1px solid var(--line); }
.app .seg button.on { background: var(--green-dim); color: var(--green); box-shadow: inset 0 -2px 0 var(--green); }
.app .seg.tier button.on[data-v="vip"] { color: var(--gold); background: rgba(245, 180, 0, .1); box-shadow: inset 0 -2px 0 var(--gold); }

/* #4 every row action is one ghost xs button */
.app .item .acts button, .app .tk-acts button, .app .ag-acts button, .app #sTpls button, .app .days button {
  height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-btn); background: transparent; color: var(--text);
  font: 700 .72rem var(--body); text-transform: uppercase; letter-spacing: .03em; cursor: pointer; }
.app .item .acts button:hover, .app .tk-acts button:hover, .app .ag-acts button:hover, .app #sTpls button:hover { border-color: #4a4a4a; background: var(--card-2); }
.app .item .acts button[data-r="win"]:hover, .app .tk-acts button[data-r="win"]:hover { border-color: var(--green); color: var(--green); }
.app .item .acts button[data-r="loss"]:hover, .app .item .acts button.warn:hover, .app .tk-acts button[data-r="loss"]:hover, .app .tk-acts button.warn:hover { border-color: var(--red); color: var(--red); }

/* #6 inputs like the site's: near-black, hairline, green focus ring */
.app input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]), .app select, .app textarea, .designer input:not([type=checkbox]):not([type=color]) {
  background: #0d0d0d; border: 1px solid var(--line); border-radius: var(--r-btn); color: var(--text); }
.app input:focus, .app select:focus, .app textarea:focus, .designer input:focus { border-color: var(--green); outline: 0; box-shadow: 0 0 0 3px var(--green-dim); }

/* #7 type scale */
.app .main { font-size: 15px; }
@media (max-width: 860px) { .app .main { font-size: 16px; } }
.app .main h1, .app [data-pane] > h1, .app .pane-head h1, .app .sch-top h1 { font: 700 44px/.95 var(--head); letter-spacing: -.005em; }
@media (max-width: 860px) { .app .main h1, .app [data-pane] > h1, .app .pane-head h1, .app .sch-top h1 { font-size: 36px; } }
.app .sec, .app h2.sec, .app [data-pane="schedule"] .sec { font: 600 20px/1.1 var(--head); letter-spacing: .01em; text-transform: uppercase; }
.app .side .tab { font: 500 14px var(--body); }

/* #8 the slash: a skewed bar over each title, and as the active-tab marker */
.app [data-pane] > h1::before, .app .pane-head h1::before, .app .sch-top h1::before { width: 28px; height: 6px; margin-bottom: 14px; }
@media (min-width: 861px) {
  .app .main::before { top: 110px; width: 150px; height: 150px; opacity: .35; -webkit-mask-image: none; mask-image: none;
    background: linear-gradient(115deg, transparent calc(50% - 1px), var(--green) calc(50% - 1px), var(--green) calc(50% + 1px), transparent calc(50% + 1px)); }
  .app .tab.sel { box-shadow: none; position: relative; }
  .app .tab.sel::before { content: ""; position: absolute; left: 2px; top: 9px; bottom: 9px; width: 4px; background: var(--green); transform: skewX(-14deg); }
}

/* #10 empty states share the Record card pattern */
.app .tk-empty.tk-first, .app .ag-empty, .app .empty-state { position: relative; padding: 26px 24px 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); text-align: left; }
.app .tk-empty.tk-first::before, .app .ag-empty::before, .app .empty-state::before { content: ""; display: block; width: 24px; height: 5px; background: var(--green); transform: skewX(-24deg); margin-bottom: 12px; }
.app .tk-empty.tk-first b, .app .empty-state h2 { display: block; font: 700 22px/1.05 var(--head); text-transform: uppercase; margin-bottom: 6px; }
.app .empty, .app .tk-empty:not(.tk-first) { border: 1px dashed var(--line); border-radius: var(--r-card); color: var(--muted); font-size: 13px; padding: 14px 16px; background: transparent; }

/* #11 Accounts uses the width */
.app [data-pane="accounts"] .acct-list { max-width: none; }

/* #12 sidebar surface and square count chips */
.app .side { background: #0d0d0d; border-right: 1px solid rgba(255, 255, 255, .06); }
.app .tab .n { border-radius: var(--r-chip); background: var(--card-2); color: var(--text); padding: 1px 6px; }
.app .tab .n.warn, .app #acctN { background: var(--green); color: #000; }

/* #14 small things */
.app .tk-chip { border-radius: var(--r-chip) !important; border-style: solid !important; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.app .tk-chip.c-win { background: var(--green); color: #000; border-color: var(--green); }
.app .tk-chip.c-loss { background: var(--red); color: #000; border-color: var(--red); }
.app .trial { border-left: 4px solid var(--gold); }

/* #2 phone top bar (the sidebar is the bottom tab bar there) */
.app-top { display: none; }
@media (max-width: 860px) {
  .app-top { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 25; height: 56px; margin: -20px -16px 16px; padding: 0 16px;
    background: rgba(20, 20, 20, .85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, .06); }
  .m-logo { display: flex; align-items: center; gap: 8px; font: 800 1.15rem var(--head); color: var(--text); text-decoration: none; margin-right: auto; }
  .app-top .news-m { margin: 0; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-btn); font: 700 .72rem var(--body); text-transform: uppercase; letter-spacing: .04em; }
  .m-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #000; font: 800 .8rem var(--head); text-decoration: none; }
}

/* #5 slim app footer */
.app-foot { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.app-foot nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.app-foot nav a { color: var(--muted); text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.app-foot nav a:hover { color: var(--text); }
.app-foot .rg-note { margin: 10px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }

/* login header CTA + admin page header + /m cards (audit #5, #14) */
.site-cta { margin-left: 4px; }
.auth-page .signup-only.site-cta { display: none; }
body.mode-signup .site-cta.signup-only { display: inline-flex; }
body.mode-signup .site-cta.login-only { display: none; }
@media (max-width: 520px) { .site-bar .nav-wide { display: none; } .site-cta { padding: 0 10px; } }
.admin-page .site-bar { margin: -28px -20px 24px; }
.m-act, .m-type, .m-card, .m-main .box { border-radius: var(--r-card, 6px) !important; }

/* after-check leftovers (docs/DASHBOARD-RESTYLE.md) */
.app .tk-board, .app .look-img, .app #lookImg, .app .news-btn { border-radius: var(--r-card) !important; }
.app .cp-logo { border-radius: var(--r-card) !important; }
.app .firstrun h2 { font: 600 20px/1.1 var(--head); letter-spacing: .01em; }