/* Global tokens to mirror index.html theme */
:root{
  --bg:#0b1420; --bg-deep:#08101a; --fg:#e5e7eb;
  --bg-grad-start:#0b1420; --bg-grad-end:#08101a;
  --aqua:#23d6e1; --glass:rgba(255,255,255,0.06); --border:rgba(255,255,255,0.12);
  --muted:rgba(255,255,255,0.60);
  --grid: rgba(35,214,225,0.06);
  --surface-strong: rgba(8,22,35,0.92);
  --surface-strong-2: rgba(8,22,35,0.88);
  --panel-shadow: 0 16px 44px rgba(0,0,0,0.45);
  --scale-factor: 1;
}
:root[data-theme=light]{
  --bg:#f8f1e0; --bg-deep:#edf6ff; --fg:#0d2638;
  /* beachy gradient from warm sand into sky */
  --bg-grad-start:#f9f3e6; --bg-grad-end:#e9f6ff;
  /* higher-contrast borders and glass for light mode */
  --aqua:#4fb4ff; --glass:rgba(255,248,236,0.72); --border:rgba(82,143,176,0.42);
  --muted:rgba(12,32,50,0.70);
  --grid: rgba(79,180,255,0.14);
  --surface-strong: rgba(255,255,255,0.98);
  --surface-strong-2: rgba(255,255,255,0.94);
  --panel-shadow: 0 12px 38px rgba(82,143,176,0.28);
}

/* Base */
html,body{height:100%}
/* Brand background: layered gradients with subtle aqua caustics */
body{
  background: var(--bg);
  background-image:
    /* subtle grid overlay */
    repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 32px),
    radial-gradient(1000px 500px at 85% -10%, rgba(35,214,225,0.08), transparent 45%),
    radial-gradient(700px 400px at 8% 25%, rgba(35,214,225,0.06), transparent 55%),
    linear-gradient(180deg, var(--bg-grad-start), var(--bg-grad-end));
  background-attachment: fixed;
  color: var(--fg);
  font-size: calc(16px * var(--scale-factor, 1));
  -webkit-font-smoothing: antialiased;
}
/* Light theme: soften aqua overlays to avoid harshness */
:root[data-theme=light] body{
  background-image:
    /* subtle grid overlay (lighter in light mode) */
    repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 32px),
    radial-gradient(900px 450px at 85% -10%, rgba(79,180,255,0.18), transparent 45%),
    radial-gradient(600px 360px at 8% 25%, rgba(255,214,165,0.22), transparent 55%),
    linear-gradient(180deg, var(--bg-grad-start), var(--bg-grad-end));
  color: #0d2638;
}
:root[data-theme=light] body,
:root[data-theme=light] body *{ font-weight:600!important; }
:root[data-theme=light] .font-bold{ font-weight:700!important; }
:root[data-theme=light] .font-extrabold{ font-weight:800!important; }
::selection{background:rgba(35,214,225,.20);color:#a7f3d0}
:focus-visible{outline:2px solid var(--aqua);outline-offset:3px}
.hidden{display:none}

/* Cards and surfaces */
.card{
  background:linear-gradient(140deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)), var(--surface-strong);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  box-shadow: var(--panel-shadow);
}
.frost{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:var(--surface-strong-2);box-shadow:var(--panel-shadow)}
.soft-border{border:1px solid var(--border)}
.glass-card{
  background:linear-gradient(150deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04)), var(--surface-strong-2);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow: var(--panel-shadow);
}
/* Light overrides for surfaces to avoid washed-out look */
:root[data-theme=light] .card{
  background:linear-gradient(140deg, rgba(255,214,165,0.26), rgba(79,180,255,0.12)), var(--surface-strong);
  box-shadow: var(--panel-shadow);
}
:root[data-theme=light] .glass-card{
  background:linear-gradient(150deg, rgba(255,214,165,0.20), rgba(79,180,255,0.12)), var(--surface-strong-2);
  box-shadow: var(--panel-shadow);
}
/* Heavier borders and deeper shadows for light mode */
:root[data-theme=light] .card,
:root[data-theme=light] .glass-card{ border-width:1.5px; }
:root[data-theme=light] .soft-border{ border-color: rgba(82,143,176,0.42) }
.ocean-gradient{background:radial-gradient(60% 60% at 70% 20%, #102232 0%, var(--bg) 45%, var(--bg-deep) 100%)}
/* Brand touches to mirror index.html */
.shadow-glow{box-shadow:0 0 30px rgba(35,214,225,.25)}
.brand-glow{filter:drop-shadow(0 0 26px rgba(35,214,225,.35)) drop-shadow(0 0 64px rgba(35,214,225,.18))}

/* Rhythm */
.section-pad{padding-block:clamp(64px, 9vw, 128px)}
.panel-pad{padding:clamp(16px, 2vw, 28px)}
/* Compact cards on very small screens to avoid wasted space */
@media (max-width: 380px){ .card{ padding:10px } }
body.shell-compact .panel-pad{padding:clamp(12px,1.4vw,22px)}
body.shell-compact .section-pad{padding-block:clamp(48px,7vw,96px)}
body.shell-compact .second-bar{top:48px}
/* Trim global spacing when shell is present so pages sit tighter on standard screens */
body.has-shell main{
  padding-top: clamp(56px, 7vw, 88px) !important;
  padding-bottom: clamp(44px, 6vw, 80px) !important;
}
@media (min-width: 1024px){
  body.has-shell main{
    padding-top: clamp(48px, 5vw, 84px) !important;
    padding-bottom: clamp(40px, 5vw, 72px) !important;
  }
}

/* Page-specific spacing refinements */
/* Pros grid: tighten gaps slightly for better density */
#pros-grid{ gap:12px }
/* Settings layout: slightly reduce big gap from utility class */
#settings-layout{ gap:18px }

/* Reveal-on-scroll */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease, transform .6s ease}
.reveal.show{opacity:1;transform:none}
.bf-bob{animation:bf-bob 3.6s ease-in-out infinite}
@keyframes bf-bob{0%{transform:translateY(0);}50%{transform:translateY(-4px);}100%{transform:translateY(0);}}

/* Buttons and tabs */
.btn,
.btn-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  min-height:40px;
  padding:.55rem .95rem;
  border-radius:.75rem;
  font-weight:600;
  line-height:1.1;
  text-align:center;
  white-space:normal;
  transition: box-shadow .2s ease, transform .2s ease;
}
.btn{background:rgba(16,185,129,.25);border:1px solid rgba(16,185,129,.35);color:#a7f3d0}
.btn[disabled], .btn:disabled{opacity:.6;cursor:not-allowed}
.btn-outline{background:var(--glass);border:1px solid var(--border);color:var(--fg)}
.btn:hover, .btn-outline:hover{box-shadow:0 0 18px rgba(34,211,238,.25); transform:translateY(-1px);}
.tab{background:var(--glass);border:1px solid var(--border);padding:.35rem .7rem;border-radius:.5rem}
.tab.active{background:rgba(34,211,238,.15);border-color:rgba(34,211,238,.45)}
.canvas-tabs .tab{background:rgba(8,22,35,0.9);border-color:rgba(255,255,255,0.14)}
:root[data-theme=light] .canvas-tabs .tab{background:rgba(255,255,255,0.95);border-color:rgba(82,143,176,0.26)}
.badge{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:999px;border:1px solid var(--border);background:var(--glass);font-size:12px;line-height:1.1;color:var(--fg);}
:root[data-theme=light] .badge{border-color:rgba(82,143,176,0.4);background:rgba(255,248,236,0.75);}
.status-pill{display:flex;align-items:center;gap:6px;padding:.45rem .7rem;border-radius:.75rem;border:1px solid var(--border);background:rgba(255,255,255,0.06)}
:root[data-theme=light] .status-pill{background:rgba(255,248,236,0.92);border-color:rgba(82,143,176,0.32)}
.status-dot{width:14px;height:14px;border-radius:50%;border:1px solid var(--border);display:inline-block;background:linear-gradient(180deg,#22d3ee,#0ea5b7)}
.status-label{font-size:12px;color:var(--fg)}
.status-legend{position:absolute;top:110%;right:0;background:rgba(8,22,35,0.95);border:1px solid var(--border);border-radius:12px;padding:10px;width:200px;box-shadow:0 16px 40px rgba(0,0,0,0.35);display:grid;gap:6px;z-index:80}
:root[data-theme=light] .status-legend{background:rgba(255,255,255,0.95);border-color:rgba(6,42,66,0.2);box-shadow:0 12px 32px rgba(6,42,66,0.2)}
.legend-row{display:flex;align-items:center;gap:10px;font-size:12px}
.legend-divider{height:1px;background:var(--border);margin:4px 0;}
.status-in_progress{background:linear-gradient(180deg,#16a34a,#15803d)}
.status-dispute{background:linear-gradient(180deg,#ef4444,#b91c1c)}
.status-scope{background:transparent;border:2px solid #eab308;box-shadow:0 0 10px rgba(234,179,8,0.45);}
.status-complete{background:linear-gradient(180deg,#fbbf24,#f59e0b);box-shadow:0 0 8px rgba(245,158,11,0.5)}
.status-received{background:linear-gradient(180deg,#38bdf8,#0284c7)}
.status-awaiting{background:linear-gradient(180deg,#38bdf8,#0ea5e9)}
.status-payment{background:linear-gradient(180deg,#f97316,#ea580c)}
.status-ship{background:linear-gradient(180deg,#8b5cf6,#6d28d9)}
.status-hold{background:linear-gradient(180deg,#475569,#1f2937)}
.status-under_offer{background:linear-gradient(180deg,#94a3b8,#64748b)}

/* Shipping progress */
.ship-progress{position:relative;padding:8px 6px}
.ship-track{display:flex;justify-content:space-between;align-items:center;position:relative;padding:0 4px}
.ship-track::before{content:"";position:absolute;top:50%;left:0;right:0;height:6px;border-radius:999px;background:linear-gradient(90deg, rgba(34,211,238,0.25), rgba(14,165,183,0.12));transform:translateY(-50%);} 
.ship-node{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:64px;text-align:center;font-size:12px;color:var(--fg)}
.ship-dot{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,0.35);background:rgba(255,255,255,0.12);box-shadow:0 0 0 4px rgba(255,255,255,0.08);} 
.ship-node.done .ship-dot{background:linear-gradient(180deg,#22d3ee,#0ea5b7);border-color:rgba(34,211,238,0.8);box-shadow:0 0 0 6px rgba(34,211,238,0.25);} 
.ship-node.active .ship-dot{background:linear-gradient(180deg,#22d3ee,#0ea5b7);border-color:#22d3ee;box-shadow:0 0 0 8px rgba(34,211,238,0.35);} 
.ship-pulse{position:absolute;top:2px;left:50%;width:12px;height:12px;border-radius:999px;background:rgba(34,211,238,0.32);transform:translateX(-50%);opacity:0;animation:ping 1.2s infinite} 
.ship-node.active .ship-pulse{opacity:1} 
.ship-label{max-width:90px;line-height:1.2}
@keyframes ping{0%{transform:translateX(-50%) scale(.8);opacity:1}70%{transform:translateX(-50%) scale(1.4);opacity:0}100%{opacity:0}}

/* Chat bubbles with avatars */
.chat-row{display:flex;margin-bottom:8px}
.chat-entry{display:flex;align-items:flex-start;gap:8px;max-width:88%}
.chat-entry.from-me .chat-bubble{background:rgba(34,211,238,0.08);border:1px solid rgba(34,211,238,0.3)}
.chat-entry.from-them{flex-direction:row-reverse}
.chat-entry.from-them .chat-bubble{background:rgba(255,255,255,0.06);border:1px solid var(--border)}
.chat-bubble{padding:8px 10px;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,0.2)}

/* Forms */
.input,
input[type="text"], input[type="search"], input[type="email"], input[type="number"], input[type="date"], input[type="password"],
select, textarea {
  background: var(--surface-strong-2);
  border: 1px solid var(--border);
  color: var(--fg);
  border-radius: .6rem;
  padding: .45rem .65rem;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
textarea { resize: vertical; }
select { background-color: var(--glass); }
.input::placeholder,
input::placeholder, textarea::placeholder { color: var(--muted); }
.input:focus,
input:focus, select:focus, textarea:focus {
  border-color: rgba(34,211,238,.45);
  box-shadow: 0 0 0 3px rgba(34,211,238,.15);
}
/* Light mode tweaks for form readability */
:root[data-theme=light] .input,
:root[data-theme=light] input,
:root[data-theme=light] select,
:root[data-theme=light] textarea {
  background: #ffffff;
  border-color: rgba(82,143,176,0.55);
  color: #0d2638;
  box-shadow: 0 8px 20px rgba(82,143,176,0.14);
}
:root[data-theme=light] input::placeholder,
:root[data-theme=light] textarea::placeholder{ color: rgba(12,32,50,0.55); }

/* Secondary nav (ui.js) */
.second-bar{position:sticky;top:56px;z-index:40;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:var(--glass);border-bottom:1px solid var(--border)}
.tabs2{display:flex;gap:.5rem;padding:.5rem 0}
.tab2{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .7rem;border-radius:.5rem;border:1px solid var(--border);color:var(--fg);text-decoration:none;background:var(--glass)}
.tab2.active{background:rgba(34,211,238,.15);border-color:rgba(34,211,238,.45);color:#a7f3d0}

/* Light-mode text contrast fixes for Tailwind utility classes in markup */
:root[data-theme=light] .text-white{color:#0d2638!important}
:root[data-theme=light] [class*="text-white/"]{color:rgba(15,23,42,0.7)!important}
:root[data-theme=light] [class~="text-white/60"]{color:rgba(15,23,42,0.64)!important}
:root[data-theme=light] [class~="text-white/70"]{color:rgba(15,23,42,0.72)!important}
:root[data-theme=light] [class~="text-slate-400"],
:root[data-theme=light] [class~="text-slate-300"]{color:#334155!important}

/* Light-mode border/background utility remaps */
:root[data-theme=light] [class~="border-white/10"]{border-color:rgba(6,42,66,0.12)!important}
:root[data-theme=light] [class~="bg-white/5"]{background:rgba(6,42,66,0.03)!important}

/* Buttons emphasize aqua in light mode */
:root[data-theme=light] .btn{
  background:linear-gradient(135deg, #63d5ff, #9be2ff);
  border-color:rgba(79,180,255,.55);
  color:#0d2638;
  box-shadow:0 8px 22px rgba(79,180,255,.24);
}
:root[data-theme=light] .btn-outline{
  background:#ffffff;
  border-color:rgba(82,143,176,.5);
  color:#0d2638;
  box-shadow:0 6px 16px rgba(82,143,176,.2);
}
:root[data-theme=light] .tab{
  color:#0d2638;
  border-color:rgba(82,143,176,.5);
  background:rgba(255,255,255,0.92);
}

/* Floating back button (ui.js) */
.fab-back{position:fixed;right:16px;bottom:84px;padding:.6rem .9rem;border-radius:.75rem;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transform:translateY(8px);transition:opacity .25s, transform .25s, box-shadow .25s;box-shadow:0 0 30px rgba(35,214,225,.15)}
.fab-back.in{opacity:1;transform:none}
.fab-back:hover{box-shadow:0 0 30px rgba(35,214,225,.30)}

/* Spinner */
.spinner{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.spinner .loader{position:relative;width:120px;height:120px;display:grid;place-items:center;}
.spinner .loader-ring{position:absolute;inset:8px;border-radius:999px;border:4px solid rgba(255,255,255,.18);border-top-color:#22d3ee;border-bottom-color:#0ea5e9;animation:spin 1s linear infinite;box-shadow:0 0 24px rgba(34,211,238,.35);}
.spinner .loader-koi-track{position:absolute;inset:0;animation:koiOrbit 7s linear infinite;transform-origin:50% 50%;}
.spinner .loader-koi-holder{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) translateY(-52px);}
.spinner .loader-koi{width:86px;height:86px;object-fit:contain;animation:koiFloat 1.6s ease-in-out infinite;filter:drop-shadow(0 10px 26px rgba(0,0,0,.35));}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes koiOrbit{to{transform:rotate(360deg)}}
@keyframes koiFloat{0%,100%{transform:translateY(-2px) rotate(-4deg);}50%{transform:translateY(6px) rotate(4deg);}}

/* Watermark */
.watermark-lock{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg, rgba(15,23,42,0.78), rgba(8,22,35,0.66));color:#22d3ee;font-weight:700;letter-spacing:2px;pointer-events:none;text-transform:uppercase;text-align:center;padding:1rem;mix-blend-mode:screen}
.watermark-lock-blur{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.watermark-blur{filter:blur(4px)}
.watermark-wrap{position:relative;overflow:hidden}
.lock-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:40;pointer-events:none}
.lock-overlay.hidden{display:none}
.lock-overlay-inner{padding:12px 16px;border:1px solid rgba(255,255,255,0.18);border-radius:12px;background:rgba(8,22,35,0.9);box-shadow:0 16px 40px rgba(0,0,0,0.35);text-align:center}

/* Utility */
.muted{color:var(--muted)}
.timeline{position:relative;padding-left:1.5rem}
.timeline:before{content:'';position:absolute;left:.35rem;top:0;bottom:0;width:1px;background:linear-gradient(180deg,rgba(255,255,255,.25),rgba(255,255,255,.05))}
.timeline-item{position:relative;padding-left:1rem}
.timeline-dot{position:absolute;left:-1.1rem;top:.3rem;height:12px;width:12px;border-radius:999px;background:rgba(35,214,225,.6);box-shadow:0 0 12px rgba(35,214,225,.6)}
.timeline-item:hover .timeline-dot{background:#22d3ee}

.btn-urgent{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  background:rgba(239,68,68,.2);
  border:1px solid rgba(239,68,68,.5);
  color:#fecaca;
  border-radius:.75rem;
  padding:.55rem .95rem;
  font-weight:700
}
.btn-urgent:hover{box-shadow:0 0 18px rgba(239,68,68,.35)}
/* Light mode readability for toolbar label */
:root[data-theme=light] [class~="text-white/80"]{color:rgba(15,23,42,0.80)!important}

/* Print styles */
@media print{
  body{ background:#fff!important; background-image:none!important; color:#000!important; }
  #bf-shell-banner, #bf-shell-side, .fab-back, .second-bar{ display:none!important; }
  .btn, .btn-outline, .tab, .tab2, .tabs2, .fab-back{ display:none!important; }
  .card, .glass-card{ border-color:#ccc!important; background:#fff!important; box-shadow:none!important; }
  a{ color:#000!important; text-decoration:none; }
}

/* Shell dropdowns and menus: solid for maximum readability */
#bf-menu-dd,
#bf-rank-dd,
.bf-menu-dd,
#bf-shell-banner nav,
#bf-shell-side,
#bf-shell-drawer .panel,
#bf-modal .card,
#bf-guide .panel,
.bf-overlay > .card,
.bf-overlay > .glass-card{
  background: var(--surface-strong) !important;
  border-color: var(--border) !important;
  box-shadow: var(--panel-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#bf-shell-drawer .scrim{ background: rgba(0,0,0,0.65) !important; }