:root {
  --green: #1a7f4b; --green-dark: #14633b; --green-light: #e7f4ec; --green-disabled: #a9d4bd;
  --ink: #1c2127; --muted: #6b7280; --line: #e3e6ea; --bg: #f7f8fa;
  --amber-bg: #fdf6e3; --amber-line: #e6cf8b; --red: #c0392b; --radius: 10px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 24px 24px 64px; }
.muted { color: var(--muted); } .small { font-size: 13px; }

/* Top bar (Google-Ads-style, persistent client switcher) */
.topbar { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; }
.topbar-inner { max-width: 1100px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; gap: 18px; }
.logo { font-size: 18px; font-weight: 800; letter-spacing: -.3px; color: var(--ink); }
.logo .accent { color: var(--green); }
.switcher { display: flex; align-items: center; gap: 8px; background: var(--green-light);
  border: 1px solid #cfe7da; border-radius: 999px; padding: 4px 6px 4px 14px; }
.switcher-label { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--green-dark); font-weight: 700; }
.switcher-select { border: none; background: transparent; font: inherit; font-weight: 600; color: var(--ink);
  padding: 4px 6px; cursor: pointer; max-width: 240px; }
.switcher-select:focus { outline: none; }
.switcher-open { background: #fff; border: 1px solid #cfe7da; border-radius: 50%; width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center; color: var(--green-dark); }
.topnav { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.chip { background: #eef0f2; border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 600; }

/* Page head */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 6px 0 18px; }
.page-head h1 { margin: 4px 0; font-size: 28px; letter-spacing: -.5px; }
.breadcrumb { font-size: 13px; }

/* Buttons */
.btn { display: inline-block; padding: 9px 16px; border-radius: 8px; font-size: 14px; font-weight: 600;
  border: 1px solid var(--green); background: var(--green); color: #fff; cursor: pointer; }
.btn:hover { background: var(--green-dark); text-decoration: none; }
.btn.outline { background: #fff; color: var(--green); }
.btn.sm { padding: 6px 12px; font-size: 13px; }

/* Summary strip */
.summary { display: flex; gap: 26px; align-items: center; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 20px; margin-bottom: 22px; flex-wrap: wrap; }
.summary-item { display: flex; flex-direction: column; }
.summary-item .num { font-size: 22px; font-weight: 700; }
.summary-item .lbl { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.summary .keys { flex-direction: row; gap: 14px; margin-left: auto; }
.key { font-size: 12px; color: var(--muted); }

/* Client grid */
.client-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.client-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); }
.client-card:hover { border-color: var(--green); box-shadow: 0 4px 14px rgba(0,0,0,.05); }
/* Main click target fills the card; padding-right leaves room for the tools badge. */
.client-card-main { display: block; padding: 18px 56px 44px 18px; color: var(--ink); }
.client-card-main:hover { text-decoration: none; }

/* Subtle action affordances overlaid on the card. */
.card-act { display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px; color: var(--muted); background: transparent;
  border: 1px solid transparent; cursor: pointer; transition: all .12s ease; }
.card-act:hover { color: var(--green-dark); background: var(--green-light); text-decoration: none; }
.card-act .ic { width: 17px; height: 17px; }
.card-act.danger:hover { color: var(--red); background: #fdecea; }
/* Tools = the headline action: bigger, accent-tinted, top-right. */
.card-tools { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 10px;
  color: var(--green); background: var(--green-light); z-index: 2; }
.card-tools .ic { width: 21px; height: 21px; }
.card-tools:hover { color: #fff; background: var(--green); border-color: var(--green); }
/* Settings + delete = quiet, bottom-right, only fully present on card hover. */
.card-foot { position: absolute; right: 12px; bottom: 10px; display: flex; align-items: center; gap: 2px; z-index: 2; }
.card-foot .card-del { display: flex; margin: 0; padding: 0; border: 0; background: none; line-height: 0; }
.card-foot .card-act { opacity: .35; }
.client-card:hover .card-foot .card-act { opacity: 1; }

/* Confirmation modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(20,30,25,.42); display: flex;
  align-items: center; justify-content: center; padding: 20px; z-index: 100; }
.modal-backdrop[hidden] { display: none; }
.modal { background: #fff; border-radius: 14px; padding: 24px; max-width: 400px; width: 100%;
  box-shadow: 0 18px 50px rgba(0,0,0,.25); animation: modal-pop .14s ease; }
@keyframes modal-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.modal h3 { margin: 0 0 8px; font-size: 18px; letter-spacing: -.3px; }
.modal-body { margin: 0 0 20px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.modal-body strong { color: var(--ink); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
.btn.danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn.danger:hover { background: #a93226; }
.client-logo { width: 42px; height: 42px; border-radius: 9px; background: var(--green-light); color: var(--green-dark);
  font-weight: 800; font-size: 20px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.client-logo img { width: 100%; height: 100%; object-fit: cover; }
.client-name { font-weight: 700; font-size: 17px; margin-top: 10px; }
.client-industry { color: var(--muted); font-size: 13px; }
.client-kpis { margin-top: 10px; font-size: 13px; color: var(--muted); }

/* Stat cards */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.stat .num { font-size: 28px; font-weight: 700; letter-spacing: -.5px; }
.stat .label { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin-top: 4px; }

/* Two column */
.two-col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; align-items: start; }
.two-col h3 { margin: 0 0 12px; }

/* Tools grid */
.tools-cat { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted);
  font-weight: 700; margin: 22px 0 10px; }
.tools-cat:first-of-type { margin-top: 8px; }
.tools-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.tools-grid + .tools-cat { margin-top: 24px; }
.tool-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; color: var(--ink); display: block; }
.tool-card:hover { border-color: var(--green); text-decoration: none; }
.tool-card.disabled, .tool-card.coming { opacity: .6; }
.tool-name { font-weight: 700; }
.tool-desc { font-size: 13px; color: var(--muted); margin: 6px 0 10px; }
.tool-kpis { font-size: 12px; color: var(--muted); margin-bottom: 10px; }

/* Activity */
.activity { list-style: none; margin: 0; padding: 0; }
.activity li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.activity li:last-child { border-bottom: none; }

/* Cards / forms */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; }
label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 5px; }
input[type=text], textarea, select { width: 100%; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 8px; font: inherit; background: #fff; }
textarea { resize: vertical; }
.field-help { font-size: 12px; color: var(--muted); margin-top: 8px; }
.row-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 14px; }
.warn { background: var(--amber-bg); border: 1px solid var(--amber-line); border-radius: 8px; padding: 10px 12px;
  font-size: 13px; color: #8a6d1a; margin-top: 10px; }

/* misc */
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.dot.green { background: var(--green); } .dot.red { background: var(--red); }
.badge { font-size: 11px; padding: 2px 7px; border-radius: 5px; background: #eef0f2; color: var(--muted); }
.badge.progress { background: var(--amber-bg); color: #8a6d00; border: 1px solid var(--amber-line); }
.keylist { list-style: none; padding: 0; } .keylist li { padding: 6px 0; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px; border-bottom: 1px solid var(--line); }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
tr.total td { border-top: 2px solid var(--line); }
@media (max-width: 860px) { .client-grid, .stats { grid-template-columns: repeat(2, 1fr); } .two-col { grid-template-columns: 1fr; } }

/* ---- unified icon set (shared across OS + tools) ---- */
.ic{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:-3px}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid #d9dee4;border-radius:8px;background:#fff;color:var(--green);cursor:pointer;padding:0;font-size:0}
.iconbtn:hover{background:var(--green-light);border-color:#cfe7da}
.iconbtn.on{background:var(--green);color:#fff;border-color:var(--green)}
.iconbtn.danger:hover{background:#fdecea;border-color:#f0b7b0;color:var(--red)}
.iconrow{display:inline-flex;gap:6px;align-items:center}

/* ---- unified global + client chrome (shared OS + tools) ---- */
.globalbar{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.gb-inner{max-width:1200px;margin:0 auto;padding:10px 24px;display:flex;align-items:center;gap:20px}
.brand{font-size:17px;font-weight:800;letter-spacing:-.3px;color:var(--ink)}
.brand:hover{text-decoration:none}.brand .accent{color:var(--green)}
.cswitch{display:flex;align-items:center;gap:10px;background:#f4f5f7;border:1px solid var(--line);border-radius:10px;padding:5px 10px 5px 14px}
.cs-label{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700}
.cswitch select{border:none;background:transparent;font:inherit;font-weight:600;color:var(--ink);padding:4px 6px;cursor:pointer;min-width:210px}
.cswitch select:focus{outline:none}
.clientbar{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:49px;z-index:39}
.cb-inner{max-width:1200px;margin:0 auto;padding:13px 24px;display:flex;align-items:center;gap:14px}
.cb-back{font-size:13px;color:var(--muted);font-weight:600}.cb-back:hover{color:var(--green)}
.cb-name{font-size:19px;font-weight:800;letter-spacing:-.3px;color:var(--ink)}
.cb-name:hover{color:var(--green);text-decoration:none}
.cb-url{font-size:13px;color:var(--muted)}
/* clientbar quick-nav: Overview / Tools, right-aligned on the name row */
.cb-nav{margin-left:auto;display:flex;gap:6px}
.cb-nav a{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:8px;font-size:13px;font-weight:600;color:var(--muted)}
.cb-nav a:hover{background:#f4f5f7;color:var(--ink);text-decoration:none}
.cb-nav a.active{background:var(--green-light);color:var(--green-dark)}
.cb-nav .ic{width:17px;height:17px}

/* to-do list */
.todo{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}
.todo:last-child{border-bottom:none}
.todo-text{flex:1;cursor:text}
.todo.done .todo-text{text-decoration:line-through;color:var(--muted)}
.todo-edit{display:none;flex:1}.todo.editing .todo-edit{display:block}.todo.editing .todo-text{display:none}
.todo-edit input{width:100%;padding:4px 8px}
.todo-actions{display:inline-flex;gap:4px;opacity:.5}.todo:hover .todo-actions{opacity:1}
.client-url{margin-top:6px}.client-desc{margin-top:3px}

/* ---- tabs as real tabs + subtabs as underline tabs (global) ---- */
.tabs{gap:28px}
.tabs a{padding:12px 2px}
.subtabs{display:flex;gap:26px;border-bottom:1px solid var(--line);margin:0 0 22px;align-items:center}
.subtabs a:not(.btn){display:inline-flex;align-items:center;gap:7px;padding:11px 2px;border-radius:0;background:none;font-size:14px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.subtabs a:not(.btn) .ic{width:16px;height:16px}
.subtabs a:not(.btn).active{background:none;color:var(--green);border-bottom-color:var(--green)}
.subtabs a:not(.btn):hover{color:var(--ink);text-decoration:none}
/* todo spacing + icon sizing */
.todo{padding:10px 0;gap:10px}
.todo .iconbtn{width:30px;height:30px}

/* to-do add row spacing */
.todo-add{display:flex;gap:12px;align-items:center}
.todo-add input{flex:1}

/* clientbar: Overview/Tools nav sits on its own row directly under the name (global) */
.cb-inner{flex-wrap:wrap}
.cb-top{display:flex;align-items:baseline;gap:10px;flex-basis:100%}
.cb-nav{margin-left:0;margin-top:2px}