/* ============================================================
   Documa — App UI mockup design system ("Engineered Trust")
   Reuses the landing-site tokens (src/styles/global.css).
   Standalone: no Tailwind, no build. Hi-fi prototype CSS.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;450;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Brand navy */
  --navy-50:#eef3fa; --navy-100:#d6e1f0; --navy-200:#aec2df; --navy-300:#7e9bc8;
  --navy-400:#4d6fa8; --navy-500:#284d86; --navy-600:#123b6e; --navy-700:#06285c;
  --navy-800:#03224f; --navy-900:#001c4b; --navy-950:#000f2a;
  /* Accent blue */
  --blue-50:#eff4ff; --blue-100:#dbe7fe; --blue-200:#bfd3fd; --blue-300:#93b4fb;
  --blue-400:#6090f7; --blue-500:#3b70f0; --blue-600:#2563eb; --blue-700:#1d4ed8; --blue-800:#1e40af;
  /* Semantic */
  --success:#16a34a; --warning:#d97706; --danger:#dc2626;
  --success-bg:#dcfce7; --warning-bg:#fef3c7; --danger-bg:#fee2e2;
  /* Sifat (for later disposisi) */
  --sifat-urgent:#b91c1c; --sifat-segera:#c2410c; --sifat-penting:#92400e;
  --sifat-rahasia:#5b21b6; --sifat-biasa:#475569;
  /* Neutral surfaces */
  --bg:#f4f7fc; --card:#ffffff; --ink:#001c4b; --muted:#64748b; --faint:#94a3b8;
  --border:#e3e8ef; --border-strong:#cbd5e1; --ring:#2563eb;
  /* Fonts */
  --font-display:'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --font-sans:'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;
  /* Radius + shadow */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px;
  --sh-sm:0 1px 2px rgb(0 28 75 / .06);
  --sh-md:0 4px 12px rgb(0 28 75 / .08);
  --sh-lg:0 12px 32px rgb(0 28 75 / .12);
  --sh-xl:0 24px 64px rgb(0 28 75 / .22);
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans); background:var(--bg); color:var(--ink);
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--font-display); letter-spacing:-.02em; line-height:1.2; font-weight:700}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums}
.muted{color:var(--muted)} .faint{color:var(--faint)}
svg{display:block}
::selection{background:var(--blue-600); color:#fff}

/* ---------- App shell ---------- */
.app{display:grid; grid-template-columns:248px 1fr; min-height:100vh}

/* Sidebar (deep navy, branded) */
.side{
  background:linear-gradient(178deg,var(--navy-900),var(--navy-950));
  color:#cdd9ec; display:flex; flex-direction:column; position:relative;
  border-right:1px solid var(--navy-800);
}
.side::after{ /* subtle beam */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 40% at 50% -5%, rgb(37 99 235 / .18), transparent 60%);
}
.brand{display:flex; align-items:center; gap:11px; padding:20px 20px 18px; position:relative; z-index:1}
.brand .logo{
  width:34px; height:34px; border-radius:9px; flex:none;
  background:linear-gradient(135deg,var(--blue-500),var(--blue-700));
  display:grid; place-items:center; color:#fff; font-family:var(--font-display); font-weight:800;
  box-shadow:0 4px 14px rgb(37 99 235 / .45), inset 0 1px 0 rgb(255 255 255 / .25);
}
.brand .name{font-family:var(--font-display); font-weight:800; font-size:18px; color:#fff; letter-spacing:-.02em}
.brand .name span{color:var(--blue-400)}
.brand .sub{font-size:10.5px; color:#7e93b6; letter-spacing:.14em; text-transform:uppercase; margin-top:1px}

.nav{padding:8px 12px; position:relative; z-index:1; flex:1; overflow:auto}
.nav-label{font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:#5f73960; color:#62769a; padding:14px 12px 6px}
.nav-item{
  display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:10px;
  color:#aebfd9; font-weight:500; font-size:13.5px; margin:2px 0; transition:.15s var(--ease);
  position:relative;
}
.nav-item svg{width:18px; height:18px; flex:none; opacity:.9}
.nav-item:hover{background:rgb(255 255 255 / .05); color:#e8eefa}
.nav-item.active{background:rgb(37 99 235 / .16); color:#fff}
.nav-item.active::before{content:""; position:absolute; left:-12px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--blue-500)}
.nav-item.soon{opacity:.5; cursor:default}
.nav-item .soon-tag{margin-left:auto; font-size:9.5px; font-weight:600; letter-spacing:.06em; background:rgb(255 255 255 / .08); color:#8aa0c4; padding:2px 6px; border-radius:6px; text-transform:uppercase}
.nav-item .count{margin-left:auto; font-size:11px; color:#7e93b6; font-family:var(--font-mono)}
.side-foot{padding:12px; position:relative; z-index:1; border-top:1px solid rgb(255 255 255 / .07)}
.org{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; background:rgb(255 255 255 / .04)}
.org .ico{width:30px;height:30px;border-radius:8px;background:rgb(255 255 255 / .08);display:grid;place-items:center;color:#aebfd9;flex:none}
.org .t{font-size:12.5px; color:#e8eefa; font-weight:600; line-height:1.25}
.org .s{font-size:10.5px; color:#7e93b6}

/* Main column */
.main{display:flex; flex-direction:column; min-width:0}
.topbar{
  height:60px; background:var(--card); border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:16px; padding:0 22px; position:sticky; top:0; z-index:5;
}
.crumb{display:flex; align-items:center; gap:7px; font-size:13.5px; color:var(--muted); min-width:0}
.crumb a:hover{color:var(--blue-700)}
.crumb .sep{color:var(--border-strong)}
.crumb .here{color:var(--ink); font-weight:600}
.search{
  margin-left:6px; flex:1; max-width:420px; display:flex; align-items:center; gap:9px;
  background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:8px 12px; color:var(--muted);
  transition:.15s var(--ease);
}
.search:focus-within{border-color:var(--blue-400); box-shadow:0 0 0 3px rgb(37 99 235 / .12); background:#fff}
.search input{border:0; background:none; outline:0; flex:1; font-size:13.5px; color:var(--ink)}
.search kbd{font-family:var(--font-mono); font-size:11px; color:var(--faint); border:1px solid var(--border); border-radius:6px; padding:1px 6px; background:#fff}
.top-actions{margin-left:auto; display:flex; align-items:center; gap:10px}
.icon-btn{width:38px; height:38px; border-radius:10px; display:grid; place-items:center; color:var(--muted); transition:.15s}
.icon-btn:hover{background:var(--bg); color:var(--ink)}
.avatar{width:34px;height:34px;border-radius:50%; background:linear-gradient(135deg,var(--navy-500),var(--navy-800)); color:#fff; display:grid; place-items:center; font-weight:700; font-size:13px; font-family:var(--font-display)}

.content{padding:24px 26px 60px; overflow:auto}
.page-head{display:flex; align-items:flex-end; gap:16px; margin-bottom:20px}
.page-head h1{font-size:23px}
.page-head .desc{color:var(--muted); font-size:13.5px; margin-top:3px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 15px; border-radius:10px;
  font-weight:600; font-size:13.5px; transition:.15s var(--ease); white-space:nowrap; border:1px solid transparent}
.btn svg{width:17px;height:17px}
.btn-primary{background:var(--blue-600); color:#fff; box-shadow:0 1px 2px rgb(0 28 75 / .12), 0 4px 12px rgb(37 99 235 / .25)}
.btn-primary:hover{background:var(--blue-700); transform:translateY(-1px); box-shadow:0 2px 4px rgb(0 28 75 / .12), 0 8px 20px rgb(37 99 235 / .32)}
.btn-secondary{background:#fff; color:var(--navy-800); border-color:var(--border-strong); box-shadow:var(--sh-sm)}
.btn-secondary:hover{border-color:var(--navy-300); background:var(--navy-50)}
.btn-ghost{color:var(--muted)} .btn-ghost:hover{background:var(--bg); color:var(--ink)}
.btn-sm{height:32px; padding:0 11px; font-size:12.5px; border-radius:8px}
.btn-danger{background:#fff; color:var(--danger); border-color:#f3c4c4} .btn-danger:hover{background:var(--danger-bg)}

/* ---------- Cards / panels ---------- */
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-sm)}
.panel-h{display:flex; align-items:center; gap:12px; padding:15px 18px; border-bottom:1px solid var(--border)}
.panel-h h3{font-size:15px} .panel-h .muted{font-size:12.5px}

/* ---------- Badges / pills ---------- */
.badge{display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 9px; border-radius:999px;
  font-size:11.5px; font-weight:600; letter-spacing:.01em; line-height:1}
.badge .dot{width:6px;height:6px;border-radius:50%}
.st-released{background:var(--success-bg); color:#15803d} .st-released .dot{background:var(--success)}
.st-draft{background:#eef2f7; color:#475569} .st-draft .dot{background:#94a3b8}
.st-obsolete{background:var(--warning-bg); color:#b45309} .st-obsolete .dot{background:var(--warning)}
.st-workflow{background:var(--blue-50); color:var(--blue-700)} .st-workflow .dot{background:var(--blue-600)}
.ver{font-family:var(--font-mono); font-size:11.5px; font-weight:600; color:var(--blue-700); background:var(--blue-50);
  border:1px solid var(--blue-100); border-radius:6px; padding:1px 7px}

/* ---------- Folder tree ---------- */
.tree{padding:6px}
.tree-item{display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:8px; color:var(--navy-800);
  font-size:13.5px; font-weight:500; cursor:pointer; transition:.12s}
.tree-item:hover{background:var(--navy-50)}
.tree-item.active{background:var(--blue-50); color:var(--blue-800); font-weight:600}
.tree-item svg{width:17px;height:17px; color:var(--blue-600); flex:none}
.tree-item.active svg{color:var(--blue-700)}
.tree-item .chev{color:var(--faint); width:14px;height:14px; transition:.15s}
.tree-item.open .chev{transform:rotate(90deg)}
.tree-children{margin-left:16px; border-left:1px solid var(--border); padding-left:4px}

/* ---------- Document table ---------- */
.toolbar{display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--border)}
.toolbar .seg{display:flex; gap:2px; background:var(--bg); border:1px solid var(--border); border-radius:9px; padding:3px}
.toolbar .seg button{width:30px;height:28px;border-radius:7px;display:grid;place-items:center;color:var(--muted)}
.toolbar .seg button.on{background:#fff; color:var(--navy-800); box-shadow:var(--sh-sm)}
.dtable{width:100%; border-collapse:collapse}
.dtable th{text-align:left; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint);
  font-weight:600; padding:10px 16px; border-bottom:1px solid var(--border); white-space:nowrap}
.dtable td{padding:11px 16px; border-bottom:1px solid var(--border); vertical-align:middle}
.dtable tbody tr{transition:.1s}
.dtable tbody tr:hover{background:var(--navy-50)}
.dtable tbody tr:last-child td{border-bottom:0}
.dtable .check{width:16px;height:16px;border:1.5px solid var(--border-strong); border-radius:5px; flex:none; transition:.12s}
tr:hover .check{border-color:var(--blue-400)}
.name-cell{display:flex; align-items:center; gap:11px; min-width:0}
.ftype{width:34px;height:34px;border-radius:9px; display:grid; place-items:center; flex:none; font-family:var(--font-display); font-weight:700; font-size:9.5px; letter-spacing:.02em; color:#fff}
.ftype.folder{background:linear-gradient(135deg,var(--blue-400),var(--blue-600)); color:#fff}
.ftype.pdf{background:linear-gradient(135deg,#f0556a,#d6293e)}
.ftype.doc{background:linear-gradient(135deg,#4d8df0,#2563eb)}
.ftype.xls{background:linear-gradient(135deg,#2bb673,#16a34a)}
.ftype.img{background:linear-gradient(135deg,#a78bfa,#7c3aed)}
.name-cell .t{font-weight:600; font-size:13.5px; color:var(--navy-900); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.name-cell .s{font-size:11.5px; color:var(--faint)}
.row-link{cursor:pointer}
.row-actions{opacity:0; transition:.12s; color:var(--faint)}
tr:hover .row-actions{opacity:1}

/* ---------- Version / status timeline ---------- */
.timeline{position:relative; padding:6px 0}
.tl-item{position:relative; padding:0 0 22px 40px}
.tl-item::before{content:""; position:absolute; left:15px; top:24px; bottom:-2px; width:2px; background:var(--border)}
.tl-item:last-child::before{display:none}
.tl-dot{position:absolute; left:6px; top:3px; width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
  background:#fff; border:2px solid var(--border); color:var(--faint)}
.tl-dot svg{width:11px;height:11px}
.tl-item.ver .tl-dot{border-color:var(--blue-500); color:var(--blue-600); background:var(--blue-50)}
.tl-item.current .tl-dot{border-color:var(--blue-600); background:var(--blue-600); color:#fff; box-shadow:0 0 0 4px rgb(37 99 235 / .15)}
.tl-card{background:#fff; border:1px solid var(--border); border-radius:var(--r-md); padding:12px 14px; box-shadow:var(--sh-sm)}
.tl-item.current .tl-card{border-color:var(--blue-200); background:linear-gradient(0deg,#fff,var(--blue-50))}
.tl-head{display:flex; align-items:center; gap:9px; margin-bottom:5px}
.tl-head .vn{font-family:var(--font-mono); font-weight:600; font-size:13px; color:var(--navy-900)}
.tl-head time{margin-left:auto; font-size:11.5px; color:var(--faint); font-family:var(--font-mono)}
.tl-meta{font-size:12.5px; color:var(--muted)}
.tl-comment{font-size:13px; color:var(--navy-800); margin-top:6px; padding-top:8px; border-top:1px dashed var(--border)}
.tl-event{font-size:12.5px; color:var(--muted); padding-left:2px}
.tl-event b{color:var(--navy-800); font-weight:600}

/* ---------- Meta list (doc detail) ---------- */
.meta-row{display:flex; gap:12px; padding:11px 0; border-bottom:1px solid var(--border); font-size:13px}
.meta-row:last-child{border-bottom:0}
.meta-row .k{width:120px; color:var(--muted); flex:none}
.meta-row .v{color:var(--navy-900); font-weight:500}

/* ---------- Preview placeholder ---------- */
.preview{aspect-ratio:1/1.3; border-radius:var(--r-md); border:1px solid var(--border); background:
  repeating-linear-gradient(0deg,#fff,#fff 26px,#f7f9fc 26px,#f7f9fc 27px), #fff;
  position:relative; overflow:hidden; box-shadow:var(--sh-sm)}
.preview .pg{position:absolute; inset:18px; border:1px dashed var(--border-strong); border-radius:6px; display:grid; place-items:center; color:var(--faint); gap:8px; text-align:center}

/* ---------- Modal / overlay ---------- */
.overlay{position:fixed; inset:0; background:rgb(0 15 42 / .55); backdrop-filter:blur(3px); display:grid; place-items:center; z-index:50; padding:24px}
.modal{width:100%; max-width:540px; background:var(--card); border-radius:var(--r-xl); box-shadow:var(--sh-xl); overflow:hidden; animation:pop .35s var(--ease)}
@keyframes pop{from{opacity:0; transform:translateY(12px) scale(.98)}to{opacity:1; transform:none}}
.modal-h{display:flex; align-items:center; gap:12px; padding:18px 22px; border-bottom:1px solid var(--border)}
.modal-h h3{font-size:17px} .modal-h .x{margin-left:auto; color:var(--faint)} .modal-h .x:hover{color:var(--ink)}
.modal-b{padding:22px} .modal-f{display:flex; gap:10px; justify-content:flex-end; padding:16px 22px; border-top:1px solid var(--border); background:var(--bg)}
.dropzone{border:2px dashed var(--blue-200); background:var(--blue-50); border-radius:var(--r-lg); padding:30px; text-align:center; transition:.2s}
.dropzone:hover{border-color:var(--blue-400); background:#eaf1ff}
.dropzone .ic{width:52px;height:52px;border-radius:14px;margin:0 auto 12px;display:grid;place-items:center;background:#fff;color:var(--blue-600);box-shadow:var(--sh-md)}
.dropzone h4{font-size:15px; color:var(--navy-900)} .dropzone p{font-size:12.5px; color:var(--muted); margin-top:3px}

/* file chip + progress */
.filechip{display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--border); border-radius:var(--r-md); background:#fff}
.progress{height:6px; border-radius:99px; background:var(--blue-100); overflow:hidden; margin-top:9px}
.progress>i{display:block; height:100%; background:linear-gradient(90deg,var(--blue-500),var(--blue-600)); border-radius:99px}

/* ---------- Form fields ---------- */
.field{margin-bottom:16px} .field:last-child{margin-bottom:0}
.field label{display:block; font-size:12.5px; font-weight:600; color:var(--navy-800); margin-bottom:6px}
.field .input,.field select{width:100%; height:40px; padding:0 13px; border:1px solid var(--border-strong); border-radius:10px; font:inherit; font-size:14px; color:var(--ink); background:#fff; transition:.15s}
.field textarea.input{height:auto; padding:11px 13px; resize:vertical; min-height:78px}
.field .input:focus,.field select:focus{outline:0; border-color:var(--blue-500); box-shadow:0 0 0 3px rgb(37 99 235 / .14)}
.field .hint{font-size:11.5px; color:var(--muted); margin-top:5px}

/* ---------- Login ---------- */
.auth{min-height:100vh; display:grid; grid-template-columns:1.05fr 1fr}
.auth-brand{background:linear-gradient(160deg,var(--navy-800),var(--navy-950)); color:#fff; position:relative; overflow:hidden; padding:54px; display:flex; flex-direction:column}
.auth-brand::before{content:""; position:absolute; width:520px;height:520px; right:-160px; top:-120px; border-radius:50%;
  background:radial-gradient(circle,rgb(37 99 235 / .35),transparent 62%)}
.auth-brand::after{content:""; position:absolute; inset:0; background-image:linear-gradient(rgb(255 255 255 /.04) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255 /.04) 1px,transparent 1px); background-size:34px 34px; mask-image:radial-gradient(120% 80% at 70% 20%,#000,transparent 75%)}
.auth-card-wrap{display:grid; place-items:center; padding:40px; background:var(--card)}
.auth-card{width:100%; max-width:380px}
.divider{display:flex; align-items:center; gap:12px; color:var(--faint); font-size:12px; margin:18px 0}
.divider::before,.divider::after{content:""; height:1px; flex:1; background:var(--border)}
.sso-btn{display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:44px; border:1px solid var(--border-strong); border-radius:11px; background:#fff; font-weight:600; font-size:13.5px; color:var(--navy-800); margin-bottom:10px; transition:.15s}
.sso-btn:hover{border-color:var(--navy-300); background:var(--navy-50)}
.sso-btn svg{width:19px;height:19px}

/* scrollbars */
*::-webkit-scrollbar{width:10px;height:10px} *::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:99px;border:3px solid transparent;background-clip:content-box}
.side *::-webkit-scrollbar-thumb{background:rgb(255 255 255 /.12);background-clip:content-box}
@media(max-width:920px){.app{grid-template-columns:1fr} .side{display:none} .auth{grid-template-columns:1fr} .auth-brand{display:none}}

/* ===== shared components (dashboard / admin / lists) ===== */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
@media(max-width:1000px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px 18px; box-shadow:var(--sh-sm)}
.stat .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:#fff}
.stat .n{font-family:var(--font-display); font-weight:800; font-size:26px; color:var(--navy-900); margin-top:12px; letter-spacing:-.02em}
.stat .l{font-size:12.5px; color:var(--muted); margin-top:1px}
.stat .d{font-size:11.5px; font-weight:600; margin-top:7px; display:inline-flex; align-items:center; gap:4px}
.stat .d svg{width:13px;height:13px}
.stat .up{color:var(--success)} .stat .down{color:var(--warning)}
.qa{display:flex; align-items:center; gap:11px; padding:11px 13px; border:1px solid var(--border); border-radius:12px; transition:.14s var(--ease); cursor:pointer}
.qa:hover{border-color:var(--blue-300); background:var(--blue-50); transform:translateY(-1px)}
.qa .ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:#fff;flex:none}
.qa .t{font-weight:600;font-size:13.5px;color:var(--navy-900)} .qa .s{font-size:11.5px;color:var(--muted); margin-top:1px}
.qa .chev{margin-left:auto; color:var(--faint)}
.tabs{display:flex; gap:2px; border-bottom:1px solid var(--border); padding:0 6px}
.tab{padding:12px 14px; font-size:13.5px; font-weight:600; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer; display:inline-flex; align-items:center; gap:7px}
.tab.on{color:var(--blue-700); border-bottom-color:var(--blue-600)}
.tab:hover:not(.on){color:var(--navy-800)}
.tab .pill{font-size:10.5px; background:var(--bg); color:var(--muted); border-radius:99px; padding:1px 7px; font-family:var(--font-mono)}
.tab.on .pill{background:var(--blue-50); color:var(--blue-700)}
.lrow{display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--border)}
.lrow:last-child{border-bottom:0} .lrow:hover{background:var(--navy-50)}
.lrow .ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none}
.tgl{width:38px;height:22px;border-radius:99px;background:var(--border-strong);position:relative;transition:.15s;flex:none}
.tgl.on{background:var(--blue-600)}
.tgl::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:3px;left:3px;transition:.15s;box-shadow:var(--sh-sm)}
.tgl.on::after{left:19px}
.chip{display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 9px; border-radius:7px; font-size:11.5px; font-weight:600; background:var(--bg); color:var(--navy-700); border:1px solid var(--border)}
.chip.role{background:var(--blue-50); color:var(--blue-700); border-color:var(--blue-100)}
.chip.admin{background:#ecfdf5; color:#047857; border-color:#a7f3d0}