/* ============================================================
   bookmark.ie — prototype dashboards
   Faithful re-creation of the bookmark.ie dashboard shell.
   Base palette = "Omada Light Green"; 9 more themes below.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap');

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  background:var(--bg2);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}

/* ----------------------------------------------------------------
   THEME TOKENS — base = Omada Light Green
---------------------------------------------------------------- */
.app{
  --bg:#f1f7f4;
  --bg2:#e9f2ee;
  --text:#16302a;
  --text-dim:#6b8079;
  --card:#ffffff;
  --card-border:#e2ece9;
  --header1:#0c7a63;
  --header2:#0a5949;
  --header-text:#ffffff;
  --header-border:rgba(255,255,255,.18);
  --widhead1:#0e7f67;
  --widhead2:#0b5e4c;
  --widhead-text:#eafff8;
  --accent:#10a07f;
  --clock:#13c39a;
  --tab-active-bg:#0c7359;
  --tab-active-text:#ffffff;
  --pill-text:#0c4338;
  --upgrade-bg:#0fa07d;
  --upgrade-text:#ffffff;
  --folder:#f4c64e;
  --folder-edge:#e0a92c;
  --row-sub:#8aa39b;
  --grip:rgba(255,255,255,.55);
  --icon-tile:#ffffff;
  color-scheme:light;
}

/* 1 ─ Sky Blue (light) */
.app[data-theme="skyblue"]{
  --bg:#f0f6fd; --bg2:#e6f0fa; --text:#16263a; --text-dim:#6a839d;
  --card:#fff; --card-border:#d8e6f4;
  --header1:#2b8fe0; --header2:#1c6fc0; --header-text:#fff; --header-border:rgba(255,255,255,.22);
  --widhead1:#38a0ee; --widhead2:#1f7fd0; --widhead-text:#eef8ff;
  --accent:#1e90ff; --clock:#2ea6ff; --tab-active-bg:#1c7fd0; --tab-active-text:#fff;
  --pill-text:#0c486e; --upgrade-bg:#1e90ff; --upgrade-text:#fff;
  --row-sub:#8aa0b4; --grip:rgba(255,255,255,.6); --icon-tile:#fff; color-scheme:light;
}

/* 2 ─ Navy Professional (light body, navy chrome) */
.app[data-theme="navy"]{
  --bg:#f4f6fa; --bg2:#eaeef5; --text:#1a2230; --text-dim:#687286;
  --card:#fff; --card-border:#e0e5ee;
  --header1:#233a5e; --header2:#16263f; --header-text:#fff; --header-border:rgba(255,255,255,.2);
  --widhead1:#2a456e; --widhead2:#182c49; --widhead-text:#eef3fa;
  --accent:#3b6fb0; --clock:#4f8fd6; --tab-active-bg:#233a5e; --tab-active-text:#fff;
  --pill-text:#233a5e; --upgrade-bg:#3b6fb0; --upgrade-text:#fff;
  --row-sub:#8493a8; --grip:rgba(255,255,255,.55); --icon-tile:#fff; color-scheme:light;
}

/* 3 ─ Dark Business (dark slate + gold) */
.app[data-theme="darkbiz"]{
  --bg:#161922; --bg2:#0f1118; --text:#e7e6e3; --text-dim:#9a9a92;
  --card:#1d212c; --card-border:#2b3040;
  --header1:#1c2230; --header2:#12151e; --header-text:#f0ede4; --header-border:rgba(217,164,65,.32);
  --widhead1:#2a3142; --widhead2:#1a1f2b; --widhead-text:#efe9da;
  --accent:#d9a441; --clock:#d9a441; --tab-active-bg:#c79a3e; --tab-active-text:#2a2206;
  --pill-text:#e7e6e3; --upgrade-bg:#d9a441; --upgrade-text:#2a2206;
  --row-sub:#8a8a82; --grip:rgba(239,233,218,.5); --icon-tile:#fff; color-scheme:dark;
}

/* 4 ─ Black Hacker (terminal green on black) */
.app[data-theme="hacker"]{
  --bg:#0a0e0c; --bg2:#060807; --text:#b8f0d2; --text-dim:#5f9a7a;
  --card:#0e1512; --card-border:#1b2b22;
  --header1:#0a120d; --header2:#050806; --header-text:#7bf7b0; --header-border:rgba(43,255,136,.24);
  --widhead1:#0d2a1d; --widhead2:#08160f; --widhead-text:#bff7df;
  --accent:#2bff88; --clock:#2bff88; --tab-active-bg:#0f7a4a; --tab-active-text:#d7ffe8;
  --pill-text:#bff7df; --upgrade-bg:#15a05f; --upgrade-text:#eafff5;
  --row-sub:#5f9a7a; --grip:rgba(123,247,176,.45); --icon-tile:#fff; color-scheme:dark;
}

/* 5 ─ Business Red (light, crimson) */
.app[data-theme="red"]{
  --bg:#faf5f5; --bg2:#f2e9e9; --text:#2a1d1d; --text-dim:#8a6f6f;
  --card:#fff; --card-border:#ecdada;
  --header1:#b3242f; --header2:#8a1a23; --header-text:#fff; --header-border:rgba(255,255,255,.2);
  --widhead1:#c43340; --widhead2:#97202a; --widhead-text:#ffeef0;
  --accent:#d63a47; --clock:#e0505c; --tab-active-bg:#b3242f; --tab-active-text:#fff;
  --pill-text:#8a1a23; --upgrade-bg:#d63a47; --upgrade-text:#fff;
  --row-sub:#a98686; --grip:rgba(255,255,255,.55); --icon-tile:#fff; color-scheme:light;
}

/* 6 ─ Kali Linux (black + kali blue) */
.app[data-theme="kali"]{
  --bg:#0b0f17; --bg2:#06090f; --text:#cdd9e8; --text-dim:#6f8298;
  --card:#111722; --card-border:#1d2735;
  --header1:#0c1422; --header2:#060a12; --header-text:#79b8ff; --header-border:rgba(54,123,240,.3);
  --widhead1:#16314f; --widhead2:#0c1d33; --widhead-text:#cfe4ff;
  --accent:#367bf0; --clock:#4a9eff; --tab-active-bg:#1f5fd0; --tab-active-text:#eaf3ff;
  --pill-text:#cdd9e8; --upgrade-bg:#367bf0; --upgrade-text:#fff;
  --row-sub:#6f8298; --grip:rgba(121,184,255,.45); --icon-tile:#fff; color-scheme:dark;
}

/* 7 ─ Gaming Neon (purple/magenta on near-black) */
.app[data-theme="neon"]{
  --bg:#100a20; --bg2:#0a0716; --text:#e9e2ff; --text-dim:#9a8fc4;
  --card:#170f2b; --card-border:#2a2046;
  --header1:#1c0f38; --header2:#120a24; --header-text:#f1ebff; --header-border:rgba(255,62,165,.35);
  --widhead1:#7c3aed; --widhead2:#c026a8; --widhead-text:#ffffff;
  --accent:#ff3ea5; --clock:#22d3ee; --tab-active-bg:#7c3aed; --tab-active-text:#fff;
  --pill-text:#e9e2ff; --upgrade-bg:#ff3ea5; --upgrade-text:#2a0418;
  --row-sub:#8a7fb4; --grip:rgba(232,226,255,.5); --icon-tile:#fff; color-scheme:dark;
}

/* 8 ─ Pink Girly (light rose) */
.app[data-theme="pink"]{
  --bg:#fdf3f8; --bg2:#f8e7f0; --text:#3a2230; --text-dim:#a07089;
  --card:#fff; --card-border:#f2d6e4;
  --header1:#e85ba0; --header2:#c83d84; --header-text:#fff; --header-border:rgba(255,255,255,.28);
  --widhead1:#f06bab; --widhead2:#d24a90; --widhead-text:#fff0f7;
  --accent:#ff5fae; --clock:#ff79bd; --tab-active-bg:#e85ba0; --tab-active-text:#fff;
  --pill-text:#b03676; --upgrade-bg:#ff5fae; --upgrade-text:#fff;
  --row-sub:#b98aa4; --grip:rgba(255,255,255,.6); --icon-tile:#fff; color-scheme:light;
}

/* 9 ─ Midnight Teal (dark teal) */
.app[data-theme="teal"]{
  --bg:#08201d; --bg2:#051815; --text:#bdeee2; --text-dim:#5f9a8e;
  --card:#0c2a25; --card-border:#14403a;
  --header1:#0a322b; --header2:#061f1a; --header-text:#8ff0db; --header-border:rgba(31,217,176,.28);
  --widhead1:#0e423a; --widhead2:#082a24; --widhead-text:#bff7ec;
  --accent:#1fd9b0; --clock:#25e8bd; --tab-active-bg:#0e7a66; --tab-active-text:#d7fff5;
  --pill-text:#bff7ec; --upgrade-bg:#13b894; --upgrade-text:#04241d;
  --row-sub:#5f9a8e; --grip:rgba(189,238,226,.45); --icon-tile:#fff; color-scheme:dark;
}

/* ----------------------------------------------------------------
   APP FRAME
---------------------------------------------------------------- */
.app{
  min-height:100vh; display:flex; flex-direction:column;
  background:
    radial-gradient(1200px 600px at 80% -10%, color-mix(in srgb,var(--accent) 7%, transparent), transparent 60%),
    linear-gradient(180deg,var(--bg),var(--bg2));
}

/* ---------- top bar ---------- */
.topbar{
  display:flex; align-items:center; gap:18px; padding:14px 20px;
  background:linear-gradient(180deg,var(--header1),var(--header2));
  box-shadow:0 6px 22px -10px rgba(0,0,0,.45);
  position:sticky; top:0; z-index:40;
}
.logo-pill{
  display:flex; align-items:center; gap:8px;
  font-weight:800; font-size:21px; letter-spacing:-.3px; color:var(--header-text);
  background:color-mix(in srgb,#000 24%, var(--header2));
  border:1.5px solid var(--header-border);
  padding:8px 16px; border-radius:16px; white-space:nowrap; user-select:none;
}
.logo-pill img{width:22px;height:22px;display:block;}
.logo-pill span{opacity:.92; font-weight:700;}

.search{
  flex:1; min-width:0; max-width:560px; display:flex; align-items:center; gap:10px;
  background:#fff; border-radius:14px; padding:0 14px; height:46px;
  box-shadow:0 2px 6px rgba(0,0,0,.08) inset;
}
.search svg{width:18px;height:18px;color:#9aa6a2;flex:none;}
.search input{ border:0; outline:0; width:100%; height:100%; font:500 15px/1 'Plus Jakarta Sans',sans-serif; color:#26352f; background:transparent; }
.search input::placeholder{color:#9aa6a2;}
.search .clear{display:none;border:0;background:#eef2f0;color:#67756f;border-radius:50%;width:20px;height:20px;cursor:pointer;font-size:13px;line-height:1;align-items:center;justify-content:center;}
.search.has-text .clear{display:inline-flex;}

.actions{display:flex; align-items:center; gap:10px; margin-left:auto;}
.upgrade{
  display:inline-flex; align-items:center; gap:6px; background:var(--upgrade-bg); color:var(--upgrade-text);
  border:0; border-radius:18px; padding:9px 15px; font:700 13.5px 'Plus Jakarta Sans'; cursor:pointer;
  box-shadow:0 4px 12px -4px color-mix(in srgb,var(--upgrade-bg) 70%, transparent);
}
.icon-btn{
  width:42px; height:42px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:color-mix(in srgb,#fff 14%, var(--header2)); border:1.5px solid var(--header-border);
  color:var(--header-text); cursor:pointer; transition:.15s; position:relative;
}
.icon-btn:hover{background:color-mix(in srgb,#fff 24%, var(--header2));}
.icon-btn svg{width:18px;height:18px;}
.pill-btn{
  background:#fff; color:#143a31; border:0; border-radius:16px; padding:11px 18px;
  font:700 13.5px 'Plus Jakarta Sans'; cursor:pointer; box-shadow:0 3px 10px -4px rgba(0,0,0,.3); white-space:nowrap;
}
.pill-btn:hover{transform:translateY(-1px);}
.user-pill{
  display:inline-flex; align-items:center; gap:9px; background:#fff; border:1.5px solid #d7e6e1; border-radius:14px;
  padding:6px 12px 6px 6px; cursor:pointer; color:#1f2a26; font:700 13.5px 'Plus Jakarta Sans';
}
.user-pill .avatar{
  width:30px;height:30px;border-radius:50%; display:inline-flex;align-items:center;justify-content:center;
  color:#fff; font-weight:800; font-size:13px;
}
.user-pill .chev{color:#9aa6a2;font-size:11px;}

/* ---------- clock / date line ---------- */
.subbar{ display:flex; align-items:baseline; gap:12px; padding:14px 24px 4px; }
.clock{
  font:700 26px/1 'JetBrains Mono',monospace; color:var(--clock); letter-spacing:1px;
  text-shadow:0 0 18px color-mix(in srgb,var(--clock) 35%, transparent);
}
.subbar .sep{color:var(--text-dim);opacity:.5;font-weight:300;}
.date{font:700 16px 'JetBrains Mono',monospace;color:color-mix(in srgb,var(--clock) 80%, var(--text));opacity:.9;}
.loc{font:700 10px 'Plus Jakarta Sans';letter-spacing:2px;color:var(--text-dim);text-transform:uppercase;}

/* ---------- tabs bar ---------- */
.tabsbar{
  display:flex; align-items:center; gap:10px; margin:6px 22px 0; padding:14px 16px;
  background:color-mix(in srgb,var(--card) 72%, transparent); border:1px solid var(--card-border);
  border-radius:18px; box-shadow:0 8px 24px -18px rgba(0,0,0,.4); position:relative; z-index:20;
}
.tabs{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.tab{
  border:1.5px solid var(--card-border); background:transparent; color:var(--text);
  font:700 14px 'Plus Jakarta Sans'; padding:9px 18px; border-radius:13px; cursor:pointer; transition:.15s; white-space:nowrap;
}
.tab:hover{border-color:color-mix(in srgb,var(--accent) 50%, var(--card-border));}
.tab.active{
  background:var(--tab-active-bg); color:var(--tab-active-text); border-color:transparent;
  box-shadow:0 6px 16px -8px color-mix(in srgb,var(--tab-active-bg) 80%, transparent);
}
.tab-add{
  width:42px;height:40px;border-radius:13px; border:1.5px dashed var(--card-border); background:transparent;
  color:var(--text-dim); font-size:20px; cursor:pointer; line-height:1;
}
.tab-add:hover{color:var(--accent);border-color:var(--accent);}

/* ---------- board ---------- */
.board{ flex:1; padding:30px 22px 70px; }
.masonry{ position:relative; margin:0 auto; }

/* ---------- widget ---------- */
.widget{
  position:relative; background:var(--card); border:1px solid var(--card-border);
  border-radius:18px; padding:34px 16px 18px; box-shadow:0 18px 40px -28px rgba(0,0,0,.45);
}
.widget::after{
  content:""; position:absolute; left:22px; right:22px; bottom:9px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:.7;
}
.w-grip{ position:absolute; top:9px; left:11px; color:var(--text-dim); opacity:.5; font-size:13px; line-height:1; }
.w-lock{ position:absolute; top:11px; right:13px; color:var(--text-dim); opacity:.45; width:13px; height:13px; }
.w-header{
  position:absolute; top:-15px; left:14px; right:14px; height:42px; display:flex; align-items:center; gap:10px;
  padding:0 14px; background:linear-gradient(180deg,var(--widhead1),var(--widhead2)); color:var(--widhead-text);
  border-radius:14px; box-shadow:0 10px 22px -12px color-mix(in srgb,var(--widhead2) 80%, transparent);
}
.w-drag{color:var(--grip); font-size:13px; letter-spacing:-2px; cursor:grab; user-select:none;}
.w-title{ flex:1; text-align:center; font:700 14.5px 'Plus Jakarta Sans'; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.w-ctrls{display:flex; align-items:center; gap:8px; color:var(--grip);}
.w-ctrls button{background:none;border:0;color:inherit;cursor:pointer;padding:2px;display:inline-flex;transition:.15s;}
.w-ctrls button:hover{color:var(--widhead-text);}
.w-ctrls svg{width:16px;height:16px;transition:.2s;}
.widget.collapsed .w-body{display:none;}
.widget.collapsed::after{display:none;}
.widget.collapsed .chev-collapse svg{transform:rotate(-90deg);}

/* ---------- featured "game night" widget (synthwave) ---------- */
.widget.featured{ min-height:360px; display:flex; flex-direction:column; justify-content:flex-end;
  border:none; background:#160a2a; padding:34px 18px 20px; }
.widget.featured::after{ display:none; }
.widget.featured .w-header{ background:linear-gradient(180deg,#ff3ea5,#7c3aed); box-shadow:0 10px 26px -10px rgba(255,62,165,.6); }
.widget.featured .w-grip,.widget.featured .w-lock{ color:rgba(255,255,255,.5); }
.feat-bg{ position:absolute; inset:0; border-radius:18px; overflow:hidden;
  background:linear-gradient(180deg,#2c1152 0%,#3a1a6b 42%,#160a2a 100%); }
.feat-glow{ position:absolute; inset:0; background:radial-gradient(circle at 50% 86%, #ff6fb6 0%, #c0267e 12%, rgba(124,58,237,.25) 34%, transparent 56%); }
.feat-sun{ position:absolute; left:50%; bottom:40%; width:130px; height:130px; transform:translateX(-50%);
  border-radius:50%; background:linear-gradient(#ffe39a 0%,#ff8a4c 42%,#ff3ea5 100%);
  box-shadow:0 0 70px 12px rgba(255,95,174,.55); }
.feat-sun::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:52%;
  background:repeating-linear-gradient(180deg, transparent 0 7px, #160a2a 7px 11px);
  border-radius:0 0 50% 50%/0 0 100% 100%; }
.feat-grid{ position:absolute; left:-40%; right:-40%; bottom:0; height:46%;
  background-image:linear-gradient(rgba(34,211,238,.75) 2px,transparent 2px),linear-gradient(90deg,rgba(34,211,238,.55) 2px,transparent 2px);
  background-size:48px 32px,48px 32px;
  transform:perspective(260px) rotateX(62deg); transform-origin:bottom center;
  mask-image:linear-gradient(180deg,transparent,#000 40%); -webkit-mask-image:linear-gradient(180deg,transparent,#000 40%); }
.feat-scan{ position:absolute; inset:0; background:repeating-linear-gradient(180deg, rgba(255,255,255,.04) 0 2px, transparent 2px 4px); pointer-events:none; }
.feat-head{ position:relative; z-index:2; text-align:center; margin-bottom:18px; }
.feat-head .feat-kick{ display:inline-block; font:800 10px 'Plus Jakarta Sans'; letter-spacing:3px; color:#22d3ee;
  border:1px solid rgba(34,211,238,.5); border-radius:20px; padding:4px 12px; margin-bottom:12px; text-shadow:0 0 10px rgba(34,211,238,.8); }
.feat-head b{ display:block; font:800 38px/1 'Plus Jakarta Sans'; letter-spacing:-.5px; color:#fff;
  text-shadow:0 0 22px rgba(255,62,165,.9), 0 2px 0 #7c3aed; }
.feat-head i{ display:block; margin-top:8px; font:600 14px 'Plus Jakarta Sans'; font-style:normal; color:#e9d5ff; opacity:.9; }
.widget.featured .w-body{ position:relative; z-index:2; }
.widget.featured .w-body.grid{ grid-template-columns:repeat(auto-fit,minmax(0,1fr)); gap:10px; }
.widget.featured .bm:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.25); }
.widget.featured .bm-ico{ background:rgba(255,255,255,.95); }
.widget.featured .bm-label{ color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.7); }

/* ---------- embedded Victron VRM Portal ---------- */
.widget.embed-vrm{ padding:30px 10px 12px; min-height:430px; }
.widget.embed-vrm::after{ display:none; }
.embed-panel{ border:1px solid #d7e1ea; border-radius:12px; overflow:hidden; background:#f3f6f9; box-shadow:0 8px 22px -16px rgba(0,0,0,.4); }
.vrm-bar{ display:flex; align-items:center; gap:7px; padding:8px 12px; background:#e9eef3; border-bottom:1px solid #d7e1ea; }
.vrm-dot{ width:9px; height:9px; border-radius:50%; background:#ff5f57; }
.vrm-dot.y{ background:#febc2e; } .vrm-dot.g{ background:#28c840; }
.vrm-url{ flex:1; font:600 11px 'Plus Jakarta Sans'; color:#6a8196; background:#fff; border-radius:7px; padding:5px 10px; margin-left:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vrm-live{ display:inline-flex; align-items:center; gap:5px; font:800 9px 'Plus Jakarta Sans'; letter-spacing:1px; color:#1f8a5b; }
.vrm-live i{ width:7px; height:7px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.25); animation:vrmpulse 1.6s infinite; }
@keyframes vrmpulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }
.vrm-body{ padding:14px 14px 16px; background:#fff; }
.vrm-top{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.vrm-avatar{ width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#9fb2c2,#cdd8e2); flex:none; }
.vrm-title b{ display:block; font:800 18px 'Plus Jakarta Sans'; color:#1d2733; }
.vrm-title a{ font:600 11.5px 'Plus Jakarta Sans'; color:#0a78c4; }
.vrm-upd{ margin-left:auto; text-align:right; font:600 10px 'Plus Jakarta Sans'; color:#8a9aa8; }
.vrm-upd b{ color:#46566a; font-size:11.5px; }
.vrm-grid{ display:grid; grid-template-columns:1fr 92px 1fr; gap:8px; align-items:stretch; }
.vrm-colL,.vrm-colR{ display:flex; flex-direction:column; gap:10px; }
.vrm-colM{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; position:relative; }
.vrm-card{ border:1px solid #e3e9ef; border-radius:9px; padding:9px 11px; background:#fff; display:flex; flex-direction:column; gap:2px; }
.vrm-card-h{ font:700 11px 'Plus Jakarta Sans'; color:#7c8da0; }
.vrm-card-v{ font:800 21px 'Plus Jakarta Sans'; color:#1d2733; letter-spacing:-.5px; }
.vrm-card-v.dim{ color:#c2cdd8; }
.vrm-card-s{ font:600 10px 'Plus Jakarta Sans'; color:#9aa9b8; }
.vrm-batrow{ display:flex; align-items:center; justify-content:space-between; }
.vrm-w{ font:700 11px 'Plus Jakarta Sans'; color:#46566a; }
.vrm-card.battery{ background:linear-gradient(180deg,#fff,#f4f9ff); }
.vrm-spark{ height:22px; margin:5px 0 3px; border-radius:4px;
  background:linear-gradient(180deg,rgba(34,197,94,.18),transparent);
  -webkit-mask:linear-gradient(#000,#000); position:relative; }
.vrm-spark::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:60%;
  background-image:repeating-linear-gradient(90deg,#7bbf72 0 2px,transparent 2px 7px); opacity:.55; }
.vrm-spark.soc{ background:linear-gradient(180deg,rgba(59,134,201,.2),transparent); }
.vrm-spark.soc::after{ background-image:repeating-linear-gradient(90deg,#5aa0d6 0 2px,transparent 2px 7px); }
.vrm-spark.pvs{ background:linear-gradient(180deg,rgba(245,166,35,.22),transparent); }
.vrm-spark.pvs::after{ background-image:repeating-linear-gradient(90deg,#f0a93a 0 2px,transparent 2px 7px); }
.vrm-meta{ display:flex; justify-content:space-between; font:600 10px 'Plus Jakarta Sans'; color:#9aa9b8; }
.vrm-meta b{ color:#46566a; }
.vrm-inv{ width:62px; height:62px; border-radius:10px; background:linear-gradient(135deg,#1c8ad6,#0a5a9e); display:flex; align-items:center; justify-content:center; position:relative; box-shadow:0 6px 16px -8px rgba(10,90,158,.7); }
.vrm-inv.sm{ width:52px; height:52px; }
.vrm-inv img{ width:34px; height:34px; filter:brightness(0) invert(1); }
.vrm-inv.sm img{ width:28px; height:28px; }
.vrm-pill{ position:absolute; bottom:-9px; left:50%; transform:translateX(-50%); white-space:nowrap;
  font:700 8.5px 'Plus Jakarta Sans'; color:#0a78c4; background:#eaf4fc; border:1px solid #cfe4f6; border-radius:9px; padding:2px 7px; }
.vrm-pill.ext{ color:#1f8a5b; background:#eafaf2; border-color:#cdeede; }
.vrm-wire{ width:2px; background:#d2dde6; }
.vrm-wire.wt{ height:10px; } .vrm-wire.wm{ height:14px; }
.vrm-colM::before,.vrm-colM::after{ content:""; position:absolute; top:31px; height:2px; background:#d2dde6; width:14px; }
.vrm-colM::before{ left:-14px; } .vrm-colM::after{ right:-14px; }
.vrm-mppt{ display:grid; grid-template-columns:auto 1fr 1fr 1fr; gap:6px; font:600 9.5px 'Plus Jakarta Sans'; color:#9aa9b8; margin-top:3px; }
.vrm-mppt span{ font-weight:800; color:#7c8da0; }
.vrm-mppt b{ color:#46566a; text-align:right; }
.widget.collapsed .embed-panel{ display:none; }

/* ---------- embedded Timeslot booking dashboard ---------- */
.widget.embed-timeslot{ padding:30px 10px 12px; min-height:430px; }
.widget.embed-timeslot::after{ display:none; }
.ts-topbar{ display:flex; align-items:center; gap:7px; padding:8px 12px; background:#eef1ed; border-bottom:1px solid #e0e4da; }
.ts-url{ flex:1; font:600 11px 'Plus Jakarta Sans'; color:#6f7c6a; background:#fff; border-radius:7px; padding:5px 10px; margin-left:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ts-live{ display:inline-flex; align-items:center; gap:5px; font:800 9px 'Plus Jakarta Sans'; letter-spacing:1px; color:#14624f; }
.ts-live i{ width:7px; height:7px; border-radius:50%; background:#16a06f; box-shadow:0 0 0 3px rgba(22,160,111,.22); animation:vrmpulse 1.6s infinite; }
.ts-main{ padding:15px 15px 16px; background:#fff; }
.ts-head{ display:flex; align-items:center; margin-bottom:13px; }
.ts-h-l{ display:flex; flex-direction:column; gap:3px; }
.ts-logo{ font:800 11px 'Plus Jakarta Sans'; letter-spacing:.3px; color:#14624f; }
.ts-h-l b{ font:800 17px 'Plus Jakarta Sans'; color:#1d2733; }
.ts-range{ margin-left:auto; font:700 11px 'Plus Jakarta Sans'; color:#6a8196; background:#f2f5f0; border:1px solid #e2e8dd; border-radius:8px; padding:6px 11px; }
.ts-kpis{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1.1fr; gap:8px; margin-bottom:13px; }
.ts-kpi{ border:1px solid #e7e9e2; border-radius:10px; padding:10px 11px; background:#fff; display:flex; flex-direction:column; gap:3px; }
.ts-kpi span{ font:700 9.5px 'Plus Jakarta Sans'; letter-spacing:.3px; color:#8a9488; text-transform:uppercase; }
.ts-kpi b{ font:800 22px 'Plus Jakarta Sans'; color:#1d2733; letter-spacing:-.6px; }
.ts-kpi i{ font:600 10px 'Plus Jakarta Sans'; color:#9aa597; }
.ts-kpi i.up{ color:#14a06f; }
.ts-kpi.income{ background:linear-gradient(180deg,#f3faf6,#fff); border-color:#cfe8db; }
.ts-kpi.income b{ color:#14624f; }
.ts-kpi.attn{ background:linear-gradient(180deg,#fdf6ea,#fff); border-color:#eedcbb; }
.ts-kpi.attn b{ color:#b9892b; }
.ts-chart{ border:1px solid #e7e9e2; border-radius:10px; padding:12px 14px 10px; }
.ts-chart-h{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.ts-chart-h b{ font:800 12.5px 'Plus Jakarta Sans'; color:#1d2733; }
.ts-chart-h span{ font:600 10px 'Plus Jakarta Sans'; color:#9aa597; }
.ts-leg{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; color:#8a9488; }
.ts-leg i{ width:9px; height:9px; border-radius:3px; display:inline-block; }
.ts-leg i.b{ background:#1f8a5b; } .ts-leg i.l{ background:#c79a3e; border-radius:50%; }
.ts-plot{ position:relative; height:120px; }
.ts-bars{ position:absolute; inset:0; display:flex; align-items:flex-end; gap:10px; padding:0 4px; }
.ts-col{ flex:1; height:100%; display:flex; align-items:flex-end; }
.ts-fill{ width:100%; border-radius:5px 5px 0 0; background:linear-gradient(180deg,#2aa074,#1f8a5b); box-shadow:inset 0 -2px 0 rgba(0,0,0,.06); }
.ts-line{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }

/* ---------- grid body ---------- */
.w-body.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(76px,1fr)); gap:12px 6px; padding-top:8px; }

/* hero widget — bigger icons, airier grid (used for the lead launcher) */
.widget.hero{ padding-bottom:22px; }
.widget.hero .w-body.grid{ grid-template-columns:repeat(auto-fill,minmax(98px,1fr)); gap:18px 10px; padding-top:12px; }
.widget.hero .bm-ico{ width:64px; height:64px; border-radius:17px; box-shadow:0 8px 18px -7px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.04); }
.widget.hero .bm-ico img{ width:44px; height:44px; }
.widget.hero .bm-ico.folder-ico{ box-shadow:none; }
.widget.hero .bm-ico.folder-ico svg{ width:64px; height:64px; }
.widget.hero .bm-label{ font-size:12.5px; margin-top:1px; }
.widget.hero .folder-children{ grid-template-columns:repeat(auto-fill,minmax(98px,1fr)); gap:18px 10px; }

/* dense widget — compact small icons (used for small utility widgets) */
.widget.dense .w-body.grid{ grid-template-columns:repeat(auto-fill,minmax(60px,1fr)); gap:9px 4px; }
.widget.dense .bm-ico{ width:38px; height:38px; border-radius:10px; }
.widget.dense .bm-ico img{ width:25px; height:25px; }
.widget.dense .bm-ico.folder-ico svg{ width:38px; height:38px; }
.widget.dense .bm-label{ font-size:10.5px; }
.widget.dense .folder-children{ grid-template-columns:repeat(auto-fill,minmax(60px,1fr)); }
.bm{
  display:flex; flex-direction:column; align-items:center; gap:7px; padding:8px 4px; border-radius:12px; cursor:pointer;
  text-decoration:none; color:var(--text); border:1px solid transparent; transition:.13s; background:none;
}
.bm:hover{background:color-mix(in srgb,var(--accent) 9%, transparent); border-color:color-mix(in srgb,var(--accent) 22%, transparent);}
.bm:active{transform:scale(.95);}
.bm-ico{ width:48px; height:48px; display:flex; align-items:center; justify-content:center; background:var(--icon-tile); border-radius:13px; box-shadow:0 4px 10px -4px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.04); }
.bm-ico img{width:32px;height:32px;object-fit:contain;display:block;}
.bm-ico.folder-ico{ background:transparent; box-shadow:none; }
.bm-ico.folder-ico svg{width:48px;height:48px;}
.bm-ico.avatar-ico{ background:transparent; box-shadow:none; }
.bm-ico.avatar-ico img{ width:48px; height:48px; border-radius:13px; }
.bm-label{
  font:600 11.5px 'Plus Jakarta Sans'; text-align:center; color:var(--text);
  max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.2;
}

/* folder expansion (grid) */
.folder-children{
  grid-column:1/-1; margin:2px 2px 8px 18px; padding-left:16px;
  border-left:2px dashed color-mix(in srgb,var(--accent) 45%, var(--card-border));
  display:grid; grid-template-columns:repeat(auto-fill,minmax(76px,1fr)); gap:12px 6px; animation:foldIn .18s ease;
}
@keyframes foldIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}

/* ---------- list body ---------- */
.w-body.list{ display:flex; flex-direction:column; gap:4px; padding-top:8px; }
.w-body.list.wide{ display:grid; grid-template-columns:1fr 1fr; gap:4px 18px; }
.w-body.list.wide .folder-children-list{ grid-column:1/-1; }
.row{
  display:flex; align-items:center; gap:13px; padding:9px 10px; border-radius:12px; cursor:pointer; text-decoration:none;
  color:var(--text); border:1px solid transparent; transition:.13s;
}
.row:hover{background:color-mix(in srgb,var(--accent) 9%, transparent);border-color:color-mix(in srgb,var(--accent) 20%, transparent);}
.row:active{transform:scale(.99);}
.r-ico{ width:42px;height:42px;flex:none; display:flex;align-items:center;justify-content:center; background:var(--icon-tile); border-radius:11px; box-shadow:0 3px 8px -3px rgba(0,0,0,.32), 0 0 0 1px rgba(0,0,0,.04); }
.r-ico img{width:27px;height:27px;object-fit:contain;}
.r-ico.folder-ico{ background:transparent; box-shadow:none; }
.r-ico.folder-ico svg{width:42px;height:42px;}
.r-ico.avatar-ico{ background:transparent; box-shadow:none; }
.r-ico.avatar-ico img{ width:42px; height:42px; border-radius:11px; }
.r-text{min-width:0; display:flex; flex-direction:column; gap:2px;}
.r-text b{font:700 14px 'Plus Jakarta Sans'; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.r-text small{font:500 12px 'Plus Jakarta Sans'; color:var(--row-sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.folder-children-list{ margin:2px 0 6px 22px; padding-left:14px; border-left:2px dashed color-mix(in srgb,var(--accent) 45%, var(--card-border)); display:flex; flex-direction:column; gap:4px; animation:foldIn .18s ease; }

/* empty search state */
.empty-state{ text-align:center; padding:80px 20px; color:var(--text-dim); font:600 16px 'Plus Jakarta Sans'; }
.empty-state .big{font-size:42px; margin-bottom:10px; opacity:.5;}

/* ---------- theme picker popover ---------- */
.theme-pop{
  position:fixed; top:70px; z-index:60; width:320px; max-width:calc(100vw - 24px); max-height:calc(100vh - 86px); overflow-y:auto;
  background:var(--card); border:1px solid var(--card-border);
  border-radius:18px; box-shadow:0 30px 60px -24px rgba(0,0,0,.5); padding:16px; display:none;
}
.theme-pop.open{display:block;}
.theme-pop h4{ font:800 10.5px 'Plus Jakarta Sans'; letter-spacing:2px; text-transform:uppercase; color:var(--text-dim); margin:2px 4px 12px; }
.swatches{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.swatch{
  display:flex; align-items:center; gap:9px; min-width:0; padding:8px 9px; border-radius:12px; cursor:pointer;
  border:1.5px solid var(--card-border); background:none; color:var(--text); font:600 12px 'Plus Jakarta Sans'; text-align:left;
}
.swatch:hover{border-color:var(--accent);}
.swatch.active{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 12%, transparent);}
.swatch .chip{width:22px;height:22px;border-radius:7px;flex:none;border:1px solid rgba(0,0,0,.15);}
.swatch span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ---------- quick menu ---------- */
.qm-handle{
  position:fixed; top:120px; right:0; z-index:48; width:26px; height:52px; border:0; cursor:pointer;
  background:linear-gradient(180deg,var(--header1),var(--header2)); color:var(--header-text);
  border-radius:10px 0 0 10px; display:flex; align-items:center; justify-content:center; box-shadow:-4px 4px 14px -6px rgba(0,0,0,.4);
}
.qm-handle svg{width:16px;height:16px;transition:.2s;}
.app.qm-open .qm-handle svg{transform:rotate(180deg);}
.app.qm-open .qm-handle{right:300px;}
.quickmenu{
  position:fixed; top:0; right:0; bottom:0; width:300px; z-index:46; background:var(--card); border-left:1px solid var(--card-border);
  box-shadow:-20px 0 50px -24px rgba(0,0,0,.5); transform:translateX(100%); transition:transform .25s ease;
  padding:26px 20px; display:flex; flex-direction:column;
}
.app.qm-open .quickmenu{transform:none;}
.quickmenu h4{ font:800 11px 'Plus Jakarta Sans'; letter-spacing:2.5px; text-transform:uppercase; color:var(--text-dim); margin:8px 6px 18px; }
.qm-close{ position:absolute; top:18px; right:18px; width:30px; height:30px; border:0; cursor:pointer; border-radius:9px;
  display:flex; align-items:center; justify-content:center; background:color-mix(in srgb,var(--text-dim) 14%, transparent);
  color:var(--text); font-size:16px; line-height:1; }
.qm-close:hover{ background:color-mix(in srgb,var(--accent) 18%, transparent); }
.qm-item{ display:flex; align-items:center; gap:14px; padding:12px; border-radius:12px; cursor:pointer; color:var(--text); font:600 14.5px 'Plus Jakarta Sans'; border:0; background:none; text-align:left; width:100%; }
.qm-item:hover{background:color-mix(in srgb,var(--accent) 10%, transparent);}
.qm-item svg{width:18px;height:18px;color:var(--text-dim);}
.qm-sep{height:1px;background:var(--card-border);margin:10px 6px;}

/* ---------- account / persona menu ---------- */
.account-menu{
  position:fixed; top:70px; right:18px; z-index:60; width:340px; background:var(--card); border:1px solid var(--card-border);
  border-radius:18px; box-shadow:0 30px 60px -24px rgba(0,0,0,.5); padding:10px; display:none; max-height:82vh; overflow:auto;
}
.account-menu.open{display:block;}
.account-menu .am-head{ font:800 10.5px 'Plus Jakarta Sans'; letter-spacing:2px; text-transform:uppercase; color:var(--text-dim); padding:10px 12px 8px; }
.persona-opt{
  display:flex; align-items:center; gap:13px; width:100%; padding:11px 12px; border-radius:13px; cursor:pointer;
  border:0; background:none; text-align:left; color:var(--text); text-decoration:none;
}
.persona-opt:hover{background:color-mix(in srgb,var(--accent) 10%, transparent);}
.persona-opt.active{background:color-mix(in srgb,var(--accent) 16%, transparent);}
.persona-opt .pa{ width:38px;height:38px;border-radius:50%;flex:none; display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px; }
.persona-opt .pt{display:flex;flex-direction:column;gap:1px;min-width:0;}
.persona-opt .pt b{font:700 14px 'Plus Jakarta Sans';}
.persona-opt .pt small{font:500 12px 'Plus Jakarta Sans';color:var(--text-dim);}
.persona-opt .dot{margin-left:auto;width:9px;height:9px;border-radius:50%;background:var(--accent);opacity:0;}
.persona-opt.active .dot{opacity:1;}

/* toast */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px);
  background:#10231d; color:#eafff6; padding:12px 20px; border-radius:12px; font:600 13.5px 'Plus Jakarta Sans';
  opacity:0; pointer-events:none; transition:.25s; z-index:80; box-shadow:0 18px 40px -16px rgba(0,0,0,.6);
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* scrollbar */
*::-webkit-scrollbar{width:10px;height:10px;}
*::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text-dim) 40%, transparent);border-radius:10px;}
*::-webkit-scrollbar-track{background:transparent;}

@media (max-width:760px){ .pill-btn,.upgrade{display:none;} .search{max-width:none;} }