/* ============================================================
   reddico — design system  (v2, professional refresh)
   ============================================================ */

:root {
  /* brand */
  --brand:      #f5551d;
  --brand-2:    #ff7a3d;
  --brand-hi:   #ff8a3d;
  --brand-soft: #fff1e9;
  --brand-line: #ffd6bf;

  /* secondary accents */
  --violet:     #7c5cff;  --violet-soft:#efeaff;  --violet-line:#ddd4ff;
  --teal:       #0f9c90;  --teal-soft:  #e2f7f3;  --teal-line:  #c4ede6;
  --blue:       #3b6fd6;  --blue-soft:  #e9f0fd;  --blue-line:  #d3e0fb;

  /* surfaces */
  --bg:      #f6f3ee;
  --bg-2:    #f1ebe3;
  --card:    #ffffff;
  --line:    #efe7dc;
  --line-2:  #e2d8cb;

  /* text */
  --ink:   #191410;
  --ink-2: #5c5347;
  --ink-3: #968c7d;

  /* status */
  --ok:#1f9d5b; --ok-soft:#e6f6ec;
  --warn:#c9861a; --warn-soft:#fdf3e0;
  --info:#3b6fd6; --info-soft:#e9f0fd;
  --bad:#d4453a; --bad-soft:#fdecea;

  --radius:16px; --radius-sm:11px;
  --shadow:   0 1px 2px rgba(70,45,15,.04), 0 10px 30px rgba(70,45,15,.06);
  --shadow-lg:0 24px 60px rgba(70,45,15,.16);
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  font-family:var(--font); color:var(--ink); min-height:100vh; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  background-color:var(--bg);
  background-image:
    radial-gradient(rgba(30,20,10,.045) 1px, transparent 1.3px),
    radial-gradient(720px 520px at 5% -8%,  rgba(245,85,29,.14),  transparent 60%),
    radial-gradient(780px 560px at 105% -4%, rgba(124,92,255,.12), transparent 56%),
    radial-gradient(760px 660px at 100% 106%,rgba(15,156,144,.11), transparent 56%),
    radial-gradient(600px 600px at -8% 108%, rgba(255,138,61,.13), transparent 56%);
  background-size:23px 23px, cover, cover, cover, cover;
  background-attachment:fixed;
}
a { color:inherit; text-decoration:none; }
button { font-family:inherit; }
h1,h2,h3 { line-height:1.18; margin:0; letter-spacing:-.021em; }

/* layout ---------------------------------------------------- */
.wrap { max-width:1120px; margin:0 auto; padding:0 22px; position:relative; }
.stack { display:flex; flex-direction:column; }
.row { display:flex; align-items:center; }
.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-24{gap:24px}
.grow{flex:1}
.muted{color:var(--ink-2)}.dim{color:var(--ink-3)}
.small{font-size:13px}.center{text-align:center}
.grad{background:linear-gradient(120deg,#ff7f42,#f5551d);-webkit-background-clip:text;background-clip:text;color:transparent}

/* icons ----------------------------------------------------- */
.ico{display:inline-flex;align-items:center;justify-content:center;vertical-align:-.15em}
.ico svg{width:1.05em;height:1.05em;display:block}

/* topbar ---------------------------------------------------- */
.topbar{
  display:flex;align-items:center;gap:14px;padding:15px 22px;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.66);backdrop-filter:blur(12px) saturate(1.4);
  position:sticky;top:0;z-index:20;
}
.brand{display:flex;align-items:center;gap:11px}
.brand .mark{
  width:34px;height:34px;border-radius:11px;color:#fff;
  background:linear-gradient(135deg,var(--brand-2),var(--brand));
  display:grid;place-items:center;
  box-shadow:0 6px 16px rgba(245,85,29,.4), inset 0 1px 0 rgba(255,255,255,.35);
}
.brand .mark svg{width:20px;height:20px}
.wordmark{font-weight:800;font-size:20px;letter-spacing:-.04em}
.wordmark b{color:var(--brand)}

/* cards ----------------------------------------------------- */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.card.pad{padding:20px}
.card-h{display:flex;align-items:center;gap:11px;margin-bottom:15px}
.card-h h3{font-size:15px;font-weight:750}
.card-h .sub{font-size:12px;color:var(--ink-3);font-weight:500}
.hic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto}
.hic svg{width:16px;height:16px}

.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* stat tiles ------------------------------------------------ */
.stat{display:flex;align-items:center;gap:14px;padding:17px 18px}
.stat-ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;flex:0 0 auto}
.stat-ic svg{width:21px;height:21px}
.stat .k{font-size:11.5px;color:var(--ink-3);font-weight:650;text-transform:uppercase;letter-spacing:.05em}
.stat .v{font-size:26px;font-weight:820;letter-spacing:-.03em;margin-top:2px;line-height:1.05}

/* color chips (stat-ic + hic) ------------------------------- */
.orange{background:var(--brand-soft);color:var(--brand)}
.violet{background:var(--violet-soft);color:var(--violet)}
.teal{background:var(--teal-soft);color:var(--teal)}
.blue{background:var(--blue-soft);color:var(--blue)}

/* buttons --------------------------------------------------- */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;border-radius:12px;border:1px solid var(--line-2);
  background:#fff;color:var(--ink);font-weight:650;font-size:14px;cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.9,.25,1),box-shadow .18s,border-color .18s,background .18s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(70,45,15,.11);border-color:var(--brand-line)}
.btn:active{transform:translateY(0);transition-duration:.05s}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn .ico svg{width:1.05em;height:1.05em}

.btn.primary{
  color:#fff;border-color:transparent;
  background:linear-gradient(135deg,#ff7233,var(--brand) 58%,#e6470f);
  box-shadow:0 8px 18px rgba(245,85,29,.34), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn.primary:hover{box-shadow:0 14px 30px rgba(245,85,29,.44), inset 0 1px 0 rgba(255,255,255,.32)}
.btn.primary::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(115deg,transparent 26%,rgba(255,255,255,.45) 48%,transparent 64%);
  transform:translateX(-135%);transition:transform .6s ease;
}
.btn.primary:hover::after{transform:translateX(135%)}

.btn.ghost{background:rgba(255,255,255,.55);backdrop-filter:blur(4px)}
.btn.soft{background:var(--brand-soft);color:var(--brand);border-color:var(--brand-line)}
.btn.soft:hover{background:#ffe6d7;border-color:var(--brand-line)}
.btn.violet-btn{background:linear-gradient(135deg,#8f72ff,var(--violet));color:#fff;border-color:transparent;box-shadow:0 8px 18px rgba(124,92,255,.32)}
.btn.sm{padding:8px 13px;font-size:13px;border-radius:10px}
.btn.block{width:100%}

/* inputs ---------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:13px;font-weight:650;color:var(--ink-2)}
.input,.select,textarea.input{
  width:100%;padding:11px 13px;border-radius:11px;border:1px solid var(--line-2);
  background:#fff;color:var(--ink);font-size:14px;font-family:inherit;outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.input:focus,.select:focus,textarea.input:focus{border-color:var(--brand);box-shadow:0 0 0 3.5px rgba(245,85,29,.13)}
textarea.input{resize:vertical;min-height:84px}
.hint{font-size:12px;color:var(--ink-3)}

/* segmented ------------------------------------------------- */
.seg{display:inline-flex;background:var(--bg-2);border-radius:12px;padding:4px;gap:4px}
.seg button{border:none;background:transparent;padding:8px 14px;border-radius:9px;font-weight:650;font-size:13px;color:var(--ink-2);cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:.14s}
.seg button .ico svg{width:15px;height:15px}
.seg button.on{background:#fff;color:var(--ink);box-shadow:var(--shadow)}

/* pills ----------------------------------------------------- */
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:680;border:1px solid transparent}
.pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.open{color:var(--brand);background:var(--brand-soft);border-color:var(--brand-line)}
.pill.claimed{color:var(--warn);background:var(--warn-soft);border-color:#f2e0be}
.pill.review{color:var(--info);background:var(--info-soft);border-color:var(--blue-line)}
.pill.done{color:var(--ok);background:var(--ok-soft);border-color:#cdebd8}
.pill.rejected{color:var(--bad);background:var(--bad-soft);border-color:#f6d3cf}
.tag{font-size:11px;font-weight:750;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}

/* task cards ------------------------------------------------ */
.task{border:1px solid var(--line);border-radius:14px;padding:16px;background:#fff;transition:border-color .16s,box-shadow .16s}
.task:hover{border-color:var(--brand-line);box-shadow:0 8px 22px rgba(70,45,15,.07)}
.task+.task{margin-top:12px}
.task .top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.task .price{margin-left:auto;font-weight:820;font-size:17px;letter-spacing:-.02em}
.task .price small{color:var(--ink-3);font-weight:600;font-size:12px}
.task .meta{display:flex;flex-wrap:wrap;gap:8px 16px;margin:10px 0;font-size:13px}
.task .meta b{color:var(--ink);font-weight:650}
.task .txt{background:var(--bg-2);border-radius:10px;padding:10px 12px;font-size:13px;color:var(--ink);white-space:pre-wrap;margin:8px 0}
.task .actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;align-items:center}

.type-icon{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);flex:0 0 auto}
.type-icon svg{width:58%;height:58%}

.timer{font-variant-numeric:tabular-nums;font-weight:750;color:var(--warn);background:var(--warn-soft);border:1px solid #f2e0be;padding:3px 9px;border-radius:8px}

/* table ----------------------------------------------------- */
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;color:var(--ink-3);font-weight:650;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;padding:9px 10px;border-bottom:1px solid var(--line)}
.tbl td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.mono{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:12px}

/* toast ----------------------------------------------------- */
#toasts{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:10px;z-index:60}
.toast{background:#241b12;color:#fff;padding:12px 15px;border-radius:12px;box-shadow:var(--shadow-lg);font-size:13.5px;max-width:340px;display:flex;gap:10px;align-items:flex-start;animation:pop .2s ease;border:1px solid rgba(255,255,255,.08)}
.toast.good{background:#123521}.toast.bad{background:#3a1714}
@keyframes pop{from{transform:translateY(8px);opacity:0}}

/* modal ----------------------------------------------------- */
.overlay{position:fixed;inset:0;background:rgba(30,20,8,.44);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:50;padding:20px}
.overlay.on{display:flex}
.modal{background:#fff;border-radius:18px;width:100%;max-width:440px;box-shadow:var(--shadow-lg);animation:pop .18s ease}
.modal .m-h{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center}
.modal .m-b{padding:20px;max-height:70vh;overflow:auto}
.modal .m-f{padding:16px 20px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end}
.x{margin-left:auto;cursor:pointer;color:var(--ink-3);font-size:20px;line-height:1;background:none;border:none;width:30px;height:30px;border-radius:8px;transition:.14s}
.x:hover{background:var(--bg-2);color:var(--ink)}

/* chat ------------------------------------------------------ */
.fab{position:fixed;right:20px;bottom:20px;z-index:40}
.fab .btn{border-radius:999px;padding:13px 20px;box-shadow:var(--shadow-lg)}
.chat-panel{position:fixed;right:20px;bottom:78px;width:344px;max-width:calc(100vw - 40px);height:450px;background:#fff;border-radius:18px;box-shadow:var(--shadow-lg);display:none;flex-direction:column;z-index:41;overflow:hidden;border:1px solid var(--line)}
.chat-panel.on{display:flex}
.chat-h{padding:14px 16px;background:linear-gradient(135deg,var(--brand-2),var(--brand));color:#fff;font-weight:750;display:flex;align-items:center;gap:8px}
.chat-log{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--bg)}
.msg{max-width:82%;padding:9px 12px;border-radius:13px;font-size:13.5px;line-height:1.4}
.msg.them{background:#fff;border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:4px}
.msg.me{background:var(--brand);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.chat-in{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}

/* misc ------------------------------------------------------ */
.empty{text-align:center;padding:40px 20px;color:var(--ink-3)}
.empty .big{display:inline-flex;color:var(--ink-3);opacity:.5;margin-bottom:10px}
.empty .big svg{width:38px;height:38px}
.divider{height:1px;background:var(--line);margin:16px 0}
.copy{cursor:pointer}
.link{color:var(--brand);font-weight:650;display:inline-flex;align-items:center;gap:4px}
.link:hover{text-decoration:underline}
.link .ico svg{width:14px;height:14px}
.spark{display:block;width:100%;height:150px}

/* ============================================================
   responsive / mobile
   ============================================================ */
@media (max-width: 860px){
  .grid-2{ grid-template-columns:1fr; }
}
@media (max-width: 720px){
  .wrap{ padding:0 15px; }
  .topbar{ padding:12px 15px; gap:10px; }
  .card.pad{ padding:16px; }
  h1{ font-size:31px !important; }
  /* tab bars -> horizontal scroll strip */
  #tabs{ display:flex; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  #tabs::-webkit-scrollbar{ display:none; }
  #tabs button{ white-space:nowrap; flex:0 0 auto; }
  /* wide tables scroll inside their card */
  [data-pane="users"], [data-pane="invites"]{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .tbl th, .tbl td{ white-space:nowrap; }
  /* chat + support sizing */
  .chat-panel{ height:62vh; right:14px; bottom:74px; }
  .fab{ right:14px; bottom:14px; }
  .sup-wrap{ grid-template-columns:1fr; }
  .sup-list{ max-height:190px; }
  .sup-convo{ max-height:58vh; }
}
@media (max-width: 600px){
  /* compact 3-across stat tiles */
  .grid-3{ grid-template-columns:repeat(3,1fr); gap:10px; }
  .stat{ flex-direction:column; align-items:flex-start; gap:8px; padding:13px 12px; }
  .stat-ic{ width:34px; height:34px; border-radius:10px; }
  .stat-ic svg{ width:17px; height:17px; }
  .stat .v{ font-size:20px; }
  .stat .k{ font-size:10px; letter-spacing:.03em; }
  .hide-sm{ display:none !important; }
  h1{ font-size:27px !important; }
  .task .top{ flex-wrap:wrap; }
  .task .price{ font-size:16px; }
  .modal .m-f{ flex-direction:column-reverse; }
  .modal .m-f .btn{ width:100%; }
}