:root{--ink:#0F1B2D;--paper:#F7F7F7;--white:#fff;--line:#E5E7EB;--muted:#667085;--accent:#F0B323;--green:#2f7f64;--red:#b84334;--amber:#a96d0b}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue","Noto Sans",Arial,sans-serif;color:var(--ink);background:var(--paper)}button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}.login{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}.login-art{position:relative;background:#111 url('/images/rahshots-hero.png') 60% center/cover;color:#fff;padding:42px 55px;display:flex;flex-direction:column;justify-content:space-between}.login-art:after{content:"";position:absolute;inset:0;background:linear-gradient(#0F1B2D66,#0F1B2DF2)}.login-art>*{z-index:1;position:relative}.logo{width:180px;height:58px;object-fit:contain}.login-copy h1{font:400 58px/.98 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue","Noto Sans",Arial,sans-serif;letter-spacing:-3px;margin:20px 0}.login-copy h1 em{font-weight:400;color:var(--accent)}.login-copy p{max-width:500px;line-height:1.7;color:#c8ccc8}.eyebrow{font-size:13px;text-transform:uppercase;letter-spacing:1.8px;font-weight:900;color:#8a8f89}.eyebrow:before{content:"";display:inline-block;width:23px;height:2px;background:var(--accent);margin-right:9px;vertical-align:middle}.login-art .eyebrow{color:#d6d9d5}.login-panel{display:grid;place-items:center;padding:40px}.login-card{width:min(410px,100%)}h1,h2,h3,p{overflow-wrap:anywhere}.login-card h2{font:400 38px -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue","Noto Sans",Arial,sans-serif;margin:0 0 8px}.login-card>p{color:var(--muted);font-size:12px;line-height:1.6;margin-bottom:25px}.form{display:grid;gap:14px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form label{font-size:13px;font-weight:900}.form input,.form select,.form textarea{display:block;width:100%;border:1px solid #d5d2ca;border-radius:7px;background:#fff;padding:12px;margin-top:7px;outline:none}.form textarea{min-height:85px;resize:vertical}.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px #F0B3231a}.button{border:0;border-radius:7px;min-height:44px;padding:0 16px;font-size:13px;font-weight:900}.primary{background:var(--accent);color:var(--ink)}.dark{background:var(--ink);color:#fff}.ghost{background:#ece8df;color:#555}.danger{background:#fff0ed;color:var(--red)}.error{color:var(--red);font-size:13px}.topbar{height:74px;background:var(--ink);color:#fff;display:flex;align-items:center;padding:0 max(20px,calc((100vw - 1320px)/2));gap:22px;position:sticky;top:0;z-index:20}.role{border-left:1px solid #3c403c;padding-left:20px;font-size:12px;color:#9ea39e;text-transform:uppercase;letter-spacing:1.3px}.top-user{margin-left:auto;display:flex;align-items:center;gap:10px}.avatar{width:35px;height:35px;border-radius:50%;background:#f5dacf;color:#87462e;display:grid;place-items:center;font-size:13px;font-weight:900}.top-user p{display:flex;flex-direction:column;margin:0}.top-user strong{font-size:13px}.top-user small{font-size:12px;color:#939893}.logout{background:transparent;color:#ddd;border:1px solid #404440;border-radius:6px;padding:8px 10px;font-size:12px}.shell{width:min(1320px,calc(100% - 40px));margin:auto;padding:38px 0 70px}.welcome{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:22px}.welcome h1{font:400 37px -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue","Noto Sans",Arial,sans-serif;margin:9px 0 5px}.welcome p{font-size:13px;color:var(--muted);margin:0}.toolbar{display:flex;gap:8px;align-items:end}.toolbar label{font-size:12px;text-transform:uppercase;font-weight:900;color:#777}.toolbar select{display:block;min-width:240px;border:1px solid var(--line);border-radius:7px;padding:11px;background:#fff;margin-top:5px}.tabs{display:flex;gap:6px;overflow:auto;padding-bottom:10px}.tabs button{white-space:nowrap;border:1px solid var(--line);background:#fff;border-radius:20px;padding:9px 13px;font-size:12px;font-weight:900}.tabs button.active{background:var(--ink);color:#fff;border-color:var(--ink)}.view{display:none}.view.active{display:block}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin:15px 0}.metric,.panel{background:#fff;border:1px solid var(--line);border-radius:10px}.metric{padding:20px}.metric span{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#878c86;font-weight:900}.metric strong{display:block;font:400 25px -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue","Noto Sans",Arial,sans-serif;margin:8px 0}.metric small{color:var(--green);font-size:12px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.grid.wide{grid-template-columns:1.35fr .65fr}.panel{padding:22px;margin-top:15px}.panel-head{display:flex;justify-content:space-between;align-items:start;gap:15px;margin-bottom:15px}.panel h2{font:400 22px -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue","Noto Sans",Arial,sans-serif;margin:0 0 4px}.panel-head p{font-size:12px;color:var(--muted);margin:0}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;min-width:650px}.table th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#92968f;padding:9px 8px;border-bottom:1px solid #e8e5df}.table td{padding:11px 8px;border-bottom:1px solid #efede8;font-size:12px}.table td strong{font-size:13px}.status{display:inline-flex;padding:5px 7px;border-radius:10px;background:#eee;font-size:12px;font-weight:900}.status.PUBLISHED,.status.APPROVED,.status.PAID,.status.COMPLETED{background:#e5f2eb;color:var(--green)}.status.PENDING,.status.REQUESTED,.status.UNDER_REVIEW,.status.DRAFT{background:#fff3db;color:var(--amber)}.status.FAILED,.status.REJECTED,.status.SUSPENDED{background:#fff0ed;color:var(--red)}.actions{display:flex;gap:5px;flex-wrap:wrap}.actions button{border:0;border-radius:5px;background:#ece9e2;padding:6px 8px;font-size:12px;font-weight:900}.actions .ok{background:#e5f2eb;color:var(--green)}.actions .bad{background:#fff0ed;color:var(--red)}.empty{text-align:center;padding:30px!important;color:#888}.notice{padding:12px 14px;border-radius:7px;font-size:13px;margin:10px 0}.notice.success{background:#e5f2eb;color:var(--green)}.notice.failure{background:#fff0ed;color:var(--red)}.list{display:grid;gap:8px}.list-item{display:flex;align-items:center;gap:10px;border:1px solid #ebe8e1;border-radius:7px;padding:11px}.list-item p{display:flex;flex-direction:column;margin:0 auto 0 0;gap:3px}.list-item strong{font-size:13px}.list-item small{font-size:12px;color:#888}.modal{position:fixed;inset:0;background:#0009;z-index:40;display:none;place-items:center;padding:20px}.modal.show{display:grid}.modal-card{background:var(--paper);width:min(700px,100%);max-height:92vh;overflow:auto;border-radius:12px;padding:26px}.modal-head{display:flex;justify-content:space-between}.modal-head h2{font:400 28px -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue","Noto Sans",Arial,sans-serif;margin:0 0 15px}.close{border:0;background:#e8e4dc;width:34px;height:34px;border-radius:50%}.form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}.muted{color:var(--muted);font-size:12px}.split-list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.setup-card{border:1px solid #e7e3db;border-radius:8px;padding:12px}.setup-card h3{font-size:13px;margin:0 0 10px}.setup-card ul{list-style:none;padding:0;margin:0;display:grid;gap:7px}.setup-card li{display:flex;justify-content:space-between;gap:8px;font-size:12px;border-top:1px solid #eeeae3;padding-top:7px}@media(max-width:850px){.login{grid-template-columns:1fr}.login-art{min-height:390px;padding:28px}.login-copy h1{font-size:46px}.metrics{grid-template-columns:1fr 1fr}.grid,.grid.wide,.split-list{grid-template-columns:1fr}.welcome{align-items:start;flex-direction:column}.toolbar{width:100%}.toolbar label,.toolbar select{width:100%}.shell{width:calc(100% - 22px)}.form-grid{grid-template-columns:1fr}.top-user p,.role{display:none}}

/* ============================================================
   Workspace refresh
   ------------------------------------------------------------
   The portals were built on hard 1px boxes, uppercase micro-labels and a
   uniform type size, which reads as dense and dated. This layer keeps every
   class name and all behaviour, and changes only how it looks: softer
   surfaces carrying depth instead of outlines, one real type scale, and
   restraint with capitals so the eye has somewhere to land.
   ============================================================ */

:root {
  --line: #E8EAEE;
  --muted: #5B6574;
  --surface: #FFFFFF;
  --paper: #F4F6F9;
  --ring: 0 0 0 3px rgba(240, 179, 35, .28);
  --lift: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -12px rgba(16, 24, 40, .18);
  --lift-lg: 0 2px 4px rgba(16, 24, 40, .04), 0 24px 48px -20px rgba(16, 24, 40, .28);
  --radius: 14px;
}

body { -webkit-font-smoothing: antialiased; }

/* ---- top bar ---- */
.topbar {
  height: 68px;
  background: var(--ink);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08);
}
.role {
  border-left: 1px solid rgba(255, 255, 255, .16);
  color: #A8B0BD;
  letter-spacing: 1.1px;
  font-size: 11px;
}

/* ---- one account control ---- */
.top-user { position: relative; gap: 0; }
.account-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: #fff;
  border-radius: 999px;
  padding: 5px 12px 5px 5px;
  transition: background .15s ease, border-color .15s ease;
}
.account-trigger:hover { background: rgba(255, 255, 255, .09); }
.account-trigger.open { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .18); }
.account-trigger:focus-visible { outline: none; box-shadow: var(--ring); }
.account-trigger p { display: flex; flex-direction: column; margin: 0; text-align: left; line-height: 1.25; }
.account-trigger strong { font-size: 13px; font-weight: 650; }
.account-trigger small { font-size: 11px; color: #A8B0BD; }
.account-trigger .chev { width: 16px; height: 16px; color: #A8B0BD; transition: transform .18s ease; }
.account-trigger.open .chev { transform: rotate(180deg); }

.account-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 232px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--lift-lg);
  padding: 6px;
  display: grid;
  gap: 2px;
  z-index: 40;
}
.account-menu[hidden] { display: none; }
.account-menu a,
.account-menu button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--ink);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 550;
  text-decoration: none;
}
.account-menu a:hover,
.account-menu button:hover { background: #F1F3F7; }
.account-menu a:focus-visible,
.account-menu button:focus-visible { outline: none; background: #F1F3F7; box-shadow: var(--ring); }
.account-menu .menu-danger { color: var(--red); margin-top: 2px; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; }

/* ---- page header ---- */
.welcome h1 { font-size: 34px; letter-spacing: -.8px; font-weight: 500; margin: 6px 0 6px; }
.welcome p { font-size: 14px; line-height: 1.55; max-width: 68ch; }
.eyebrow { font-size: 11px; letter-spacing: 1.4px; font-weight: 700; color: #7A828F; }

/* ---- tabs as a segmented control ---- */
.tabs {
  gap: 4px;
  padding: 4px;
  background: #E9ECF2;
  border-radius: 999px;
  width: max-content;
  max-width: 100%;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #4A5464;
  transition: background .15s ease, color .15s ease;
}
.tabs button:hover { color: var(--ink); background: rgba(255, 255, 255, .7); }
.tabs button.active { background: var(--surface); color: var(--ink); box-shadow: var(--lift); }

/* ---- surfaces ---- */
.metric, .panel, .modal-card, .setup-card, .list-item {
  border-color: var(--line);
  border-radius: var(--radius);
}
.panel, .metric { box-shadow: var(--lift); }
.panel { padding: 24px; }
.metric { padding: 20px 22px; }
.metric span { font-size: 11px; letter-spacing: 1.1px; color: #7A828F; font-weight: 700; }
.metric strong { font-size: 30px; letter-spacing: -1px; font-weight: 500; margin: 10px 0 4px; }
/* Captions, not verdicts. The base rule paints every .metric small green,
   so "last 7 days", "worth TZS 0" and "2,676 visits" all read as good news
   -- and "photographs the buyer never downloaded", which is the opposite.
   Green is reserved for something that actually went up. */
.metric small { font-size: 12px; font-weight: 600; color: var(--muted); }
.metric small.up { color: var(--green); }
.metric small.down { color: var(--red); }
.panel h2 { font-size: 19px; letter-spacing: -.3px; font-weight: 600; }
.panel-head p { font-size: 13px; line-height: 1.5; }

/* ---- data ---- */
.table th {
  font-size: 11px;
  letter-spacing: .9px;
  color: #7A828F;
  padding: 10px 10px;
  border-bottom: 1px solid var(--line);
}
.table td { padding: 13px 10px; border-bottom: 1px solid #F1F3F7; font-size: 13px; }
.table tbody tr { transition: background .12s ease; }
.table tbody tr:hover { background: #FAFBFD; }
.table td strong { font-weight: 600; }

.status { border-radius: 999px; padding: 4px 10px; font-size: 11.5px; font-weight: 650; letter-spacing: .2px; }

/* ---- controls ---- */
.button { border-radius: 10px; font-weight: 650; letter-spacing: .1px; transition: filter .15s ease, background .15s ease; }
.button:hover { filter: brightness(.96); }
.button:focus-visible { outline: none; box-shadow: var(--ring); }
.ghost { background: #E9ECF2; color: #3B4553; }
.actions button { border-radius: 8px; padding: 7px 11px; font-weight: 600; background: #EFF1F5; }
.actions button:hover { filter: brightness(.96); }
.form input, .form select, .form textarea { border-radius: 10px; border-color: #D6DBE3; padding: 12px 13px; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--accent); box-shadow: var(--ring); }
.form label { font-size: 12.5px; font-weight: 650; }

.notice { border-radius: 10px; font-size: 13px; padding: 13px 15px; }
.list-item { border-color: var(--line); padding: 13px 14px; }

@media (max-width: 850px) {
  /* The trigger keeps the avatar on a phone; the name is what gets dropped. */
  .account-trigger p { display: none; }
  .account-trigger { padding: 5px; }
  .tabs { width: 100%; border-radius: 14px; }
}

/* A workspace an admin can move to is a destination, not an account setting:
   it stays visible in the bar instead of hiding behind the avatar. */
.workspace-link {
  margin-left: auto;
  color: #E7EAF0;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  padding: 8px 15px;
  transition: background .15s ease, border-color .15s ease;
}
.workspace-link:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .34); }
.workspace-link:focus-visible { outline: none; box-shadow: var(--ring); }
/* Once a sibling claims the auto margin, the account control must not also
   claim it, or the two are pushed apart to opposite ends of the bar. */
.workspace-link ~ .top-user { margin-left: 12px; }

@media (max-width: 850px) {
  .workspace-link { padding: 7px 11px; font-size: 12px; }
}

/* An error belongs where the reader is looking.
   Every modal form in these workspaces reported failure into the page's own
   notice strip, which sits behind the open dialog -- so trying to create an
   event and getting no response was not a missing message, it was a message
   posted behind the thing you were reading. */
.modal-notice { margin: 0 0 14px; }
.modal-notice:empty { display: none; }
.modal-notice .notice { margin: 0; }