/* Task Manager UI — built on the Inventre design system: brand orange, warm ink neutrals, cream surface */
@font-face { font-family:"Plus Jakarta Sans"; src:url(/fonts/PlusJakartaSans.woff2) format("woff2"); font-weight:400 800; font-display:swap }
:root {
  --brand:#E47127; --brand-50:#FEF3EC; --brand-100:#FCE2D0; --brand-200:#F9C49F; --brand-300:#F2A26C; --brand-400:#EB8845; --brand-600:#C45A18; --brand-700:#9A4513;
  --ink-900:#0A0A0A; --ink-800:#16140F; --ink-700:#26241F; --ink-600:#3D3B35; --ink-500:#5C5950; --ink-400:#8A8678; --ink-300:#B8B5AB; --ink-200:#D9D7D0; --ink-100:#EDECE8; --ink-50:#F7F7F6;
  --cream:#FAF7F2; --cream-50:#FDFBF8; --cream-200:#F2EDE3;
  --ok:#047857; --ok-bg:#ECFDF5; --ok-line:#A7F3D0; --bad:#B91C1C; --bad-bg:#FEF2F2; --bad-line:#FECACA; --warn:#B45309; --warn-bg:#FFFBEB; --warn-line:#FDE68A;
  --ease:cubic-bezier(.16,1,.3,1); --side:264px;
  --shadow:0 1px 2px rgba(10,10,10,.04), 0 12px 28px -18px rgba(10,10,10,.18); --glow:0 20px 40px -22px rgba(228,113,39,.35);
}
* { box-sizing:border-box } html { -webkit-text-size-adjust:100% }
body { margin:0; background:var(--cream); color:var(--ink-700); font-family:"Plus Jakarta Sans",ui-sans-serif,system-ui,"Segoe UI",sans-serif; font-size:14.5px; line-height:1.5; -webkit-font-smoothing:antialiased }
a { color:inherit } .ic { flex:none; vertical-align:-3px } h1,h2,h3 { color:var(--ink-900); letter-spacing:-.02em; margin:0 }
.muted { color:var(--ink-400); font-weight:500 } .tiny { font-size:12.5px; color:var(--ink-500) } .mono { font-variant-numeric:tabular-nums }
.inline { display:inline } .hl { color:var(--brand) } .grow { flex:1; min-width:0 }

/* ---------- app shell ---------- */
.shell { display:grid; grid-template-columns:var(--side) 1fr; min-height:100vh }
.side { position:sticky; top:0; height:100vh; background:var(--ink-900); color:#fff; display:flex; flex-direction:column; padding:22px 16px 16px; overflow:hidden; isolation:isolate }
.side::before { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(70% 38% at 100% 0%, rgba(228,113,39,.34), transparent 70%), radial-gradient(60% 30% at 0% 100%, rgba(228,113,39,.16), transparent 70%) }
.side::after { content:""; position:absolute; inset:0; z-index:-1; opacity:.5; background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.09) 1px, transparent 0); background-size:22px 22px }
.side .brand { display:flex; flex-direction:column; gap:10px; text-decoration:none; padding:4px 10px 22px }
.side .brand img { height:26px; width:auto; align-self:flex-start }
.side .brand span { font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--brand-300) }
.side nav { display:flex; flex-direction:column; gap:4px } .side .navlabel { font-size:10.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.35); padding:14px 12px 6px }
.side nav a { display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:14px; color:rgba(255,255,255,.7); text-decoration:none; font-weight:600; transition:all .25s var(--ease); position:relative }
.side nav a:hover { color:#fff; background:rgba(255,255,255,.07) }
.side nav a.on { color:#fff; background:linear-gradient(90deg, rgba(228,113,39,.95), rgba(228,113,39,.7)); box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 10px 24px -12px rgba(228,113,39,.9) }
.side nav a .ext { margin-left:auto; opacity:.5; font-size:12px }
.side .me { margin-top:auto; display:flex; align-items:center; gap:10px; padding:12px; border-radius:16px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09) }
.side .me b { display:block; color:#fff; font-size:13.5px; line-height:1.2 } .side .me small { color:rgba(255,255,255,.5); font-size:11.5px }
.side .me button { margin-left:auto; background:none; border:0; color:rgba(255,255,255,.55); cursor:pointer; padding:8px; border-radius:10px; transition:all .2s } .side .me button:hover { color:#fff; background:rgba(255,255,255,.1) }
.main { min-width:0; position:relative; isolation:isolate }
.main::before { content:""; position:absolute; left:0; right:0; top:0; height:340px; z-index:-1; background:radial-gradient(50% 90% at 92% 0%, rgba(228,113,39,.16), transparent 70%), radial-gradient(circle at 1px 1px, rgba(228,113,39,.2) 1px, transparent 0); background-size:auto, 22px 22px; -webkit-mask-image:linear-gradient(#000 55%, transparent); mask-image:linear-gradient(#000 55%, transparent) }
.wrap { max-width:1280px; margin:0 auto; padding:34px 36px 60px }

/* page header */
.pagehead { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:26px }
.eyebrow { display:inline-flex; align-items:center; gap:8px; border-radius:999px; background:var(--brand-50); border:1px solid var(--brand-100); padding:6px 12px; font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--brand-700) }
.eyebrow::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--brand) }
.pagehead h1 { font-size:clamp(1.7rem,3vw,2.5rem); font-weight:800; line-height:1.06; letter-spacing:-.03em; margin-top:12px }
.pagehead p { margin:8px 0 0; color:var(--ink-500); font-size:15px; max-width:60ch }
.squig { position:relative; white-space:nowrap } .squig svg { position:absolute; left:0; right:0; bottom:-.28em; width:100%; height:.34em }

/* ---------- cards ---------- */
.card { background:#fff; border:1px solid var(--ink-100); border-radius:20px; padding:24px 26px; margin-bottom:20px; box-shadow:var(--shadow); animation:rise .6s var(--ease) both }
.card > h2, .cardhead h2 { font-size:18px; font-weight:800 } .cardhead { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:18px }
.card.dark { background:var(--ink-900); color:rgba(255,255,255,.72); border-color:var(--ink-800); position:relative; overflow:hidden; isolation:isolate }
.card.dark::before { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(60% 120% at 100% 0%, rgba(228,113,39,.38), transparent 65%), radial-gradient(circle at 1px 1px, rgba(255,255,255,.08) 1px, transparent 0); background-size:auto, 22px 22px }
.card.dark h2 { color:#fff } .card.dark label { color:rgba(255,255,255,.6) }
.card.dark input, .card.dark select { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14); color:#fff } .card.dark input::placeholder { color:rgba(255,255,255,.35) }
.card.dark input:focus, .card.dark select:focus { border-color:var(--brand-300); background:rgba(255,255,255,.1) } .card.dark select option { color:var(--ink-900) }
.card.dark input[type=date] { color-scheme:dark }
@keyframes rise { from { opacity:0; transform:translateY(14px) } }
.card:nth-of-type(2) { animation-delay:.06s } .card:nth-of-type(3) { animation-delay:.12s }

/* KPI tiles */
.kpis { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-bottom:20px }
.kpi { position:relative; overflow:hidden; background:#fff; border:1px solid var(--ink-100); border-radius:18px; padding:16px 16px 14px; text-decoration:none; color:var(--ink-700); transition:all .35s var(--ease); animation:rise .6s var(--ease) both; animation-delay:calc(var(--i,0) * 50ms); box-shadow:var(--shadow) }
a.kpi:hover { border-color:var(--brand); box-shadow:var(--glow); transform:translateY(-3px) } .kpi.on { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-50) }
.kpi .tile { width:38px; height:38px; border-radius:13px; display:grid; place-items:center; background:var(--brand-50); border:1px solid var(--brand-100); color:var(--brand); transition:all .3s var(--ease) }
a.kpi:hover .tile { background:var(--brand); color:#fff; border-color:var(--brand) }
.kpi b { display:block; font-size:34px; font-weight:800; line-height:1; letter-spacing:-.03em; color:var(--ink-900); margin:14px 0 4px; font-variant-numeric:tabular-nums }
.kpi span { font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-400) }
.kpi .ghost { position:absolute; right:10px; top:6px; font-size:54px; font-weight:800; line-height:1; color:var(--brand-50); z-index:0; pointer-events:none; transition:color .3s } a.kpi:hover .ghost { color:var(--brand-100) } .kpi > *:not(.ghost) { position:relative }
.kpi.bad .tile { background:var(--bad-bg); border-color:var(--bad-line); color:var(--bad) } .kpi.bad b { color:var(--bad) } .kpi.ok .tile { background:var(--ok-bg); border-color:var(--ok-line); color:var(--ok) }

/* ---------- buttons ---------- */
.btn { font:inherit; font-weight:700; font-size:13.5px; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:42px; padding:0 18px; border-radius:999px; border:1px solid var(--ink-200); background:#fff; color:var(--ink-800); cursor:pointer; text-decoration:none; white-space:nowrap; transition:all .25s var(--ease) }
.btn:hover { border-color:var(--ink-900) } .btn:active { transform:scale(.97) }
.btn.primary { background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.25) } .btn.primary:hover { background:var(--brand-600); border-color:var(--brand-600); box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 12px 22px -12px rgba(228,113,39,.9) }
.btn.primary .ic:last-child { transition:transform .25s var(--ease) } .btn.primary:hover .ic:last-child { transform:translateX(3px) }
.btn.dark { background:var(--ink-900); border-color:var(--ink-900); color:var(--cream) } .btn.dark:hover { background:var(--ink-700) }
.btn.ok { background:var(--ok-bg); border-color:var(--ok-line); color:var(--ok) } .btn.ok:hover { background:var(--ok); border-color:var(--ok); color:#fff }
.btn.danger { color:var(--bad); border-color:var(--bad-line) } .btn.danger:hover { background:var(--bad); border-color:var(--bad); color:#fff }
.btn.small { height:34px; padding:0 13px; font-size:12.5px } .btn.icon { width:34px; padding:0 } .btn.huge { height:64px; padding:0 44px; font-size:20px; font-weight:800 }
.link { background:none; border:0; font:inherit; cursor:pointer; color:var(--ink-600); font-weight:600; padding:0 } .link:hover, a.link:hover { color:var(--brand) }

/* ---------- forms ---------- */
label { display:flex; flex-direction:column; gap:6px; font-size:12px; font-weight:700; color:var(--ink-600); letter-spacing:.01em }
input, select { font:inherit; font-size:14px; font-weight:500; color:var(--ink-900); height:44px; padding:0 14px; border:1px solid var(--ink-200); border-radius:14px; background:#fff; min-width:0; width:100%; outline:none; transition:all .2s var(--ease) }
input::placeholder { color:var(--ink-300) } input:focus, select:focus { border-color:var(--ink-900); box-shadow:0 0 0 4px rgba(10,10,10,.05) }
select { appearance:none; -webkit-appearance:none; padding-right:36px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A8678' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center }
.card.dark select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23F2A26C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center }
input.sm, select.sm { height:34px; font-size:12.5px; border-radius:999px; padding:0 12px } select.sm { padding-right:30px; background-position:right 9px center }
.row-form { display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end } .row-form label { flex:1 1 170px } .row-form label.wide { flex:3 1 320px } .row-form .btn { flex:none }
.stack { display:flex; flex-direction:column; gap:16px }
.seg { display:inline-flex; border-radius:999px; border:1px solid var(--ink-200); background:#fff; padding:4px; gap:2px } .card.dark .seg { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14) }
.seg input { position:absolute; opacity:0; width:0; height:0 } .seg label { flex-direction:row; align-items:center; gap:6px; height:34px; padding:0 16px; border-radius:999px; cursor:pointer; font-size:13px; transition:all .25s var(--ease); color:var(--ink-500) } .card.dark .seg label { color:rgba(255,255,255,.6) }
.seg input:checked + label { background:var(--ink-900); color:#fff } .card.dark .seg input:checked + label { background:var(--brand); color:#fff } .seg input:focus-visible + label { outline:2px solid var(--brand-300) }
.filterbar { padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid var(--ink-100) }

/* flash */
.flash { display:flex; align-items:center; gap:10px; padding:13px 16px; border-radius:16px; margin-bottom:20px; border:1px solid; font-weight:600; font-size:13.5px; animation:rise .5s var(--ease) both }
.flash.ok { background:var(--ok-bg); border-color:var(--ok-line); color:var(--ok) } .flash.warn { background:var(--warn-bg); border-color:var(--warn-line); color:var(--warn) } .flash.error { background:var(--bad-bg); border-color:var(--bad-line); color:var(--bad) }

/* ---------- pills, avatars, chips ---------- */
.pill { display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:999px; font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; border:1px solid transparent }
.pill.primary { background:var(--brand); color:#fff } .pill.secondary { background:#fff; border-color:var(--ink-200); color:var(--ink-500) }
.pill.overdue { background:var(--bad); color:#fff } .pill.big { height:32px; padding:0 16px; font-size:12px }
.pill[class*="st-"]::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor }
.pill.st-pending { background:var(--warn-bg); border-color:var(--warn-line); color:var(--warn) } .pill.st-in_progress { background:#EFF6FF; border-color:#BFDBFE; color:#1D4ED8 } .pill.st-in_progress::before { animation:blink 1.1s infinite } .pill.st-completed { background:var(--ok-bg); border-color:var(--ok-line); color:var(--ok) }
.pill.mail-sent { background:var(--ok-bg); color:var(--ok) } .pill.mail-skipped { background:var(--ink-50); color:var(--ink-400) } .pill.mail-failed { background:var(--bad-bg); color:var(--bad) }
@keyframes blink { 50% { opacity:.2 } }
.ava { flex:none; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-size:12.5px; font-weight:800; color:#fff; background:linear-gradient(135deg, hsl(var(--h,22) 72% 62%), hsl(calc(var(--h,22) + 28) 70% 46%)); box-shadow:inset 0 1px 0 rgba(255,255,255,.35) }
.ava.lg { width:44px; height:44px; font-size:14.5px } .ava.brand { background:linear-gradient(135deg,var(--brand-300),var(--brand-600)) }
.who { display:flex; align-items:center; gap:10px; min-width:0 } .who b { color:var(--ink-900); font-weight:700 } .who small { display:block; color:var(--ink-400); font-size:12px; overflow-wrap:anywhere }
.chip { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:999px; background:var(--ink-50); border:1px solid var(--ink-100); color:var(--ink-600); white-space:nowrap } .chip.team { background:var(--brand-50); border-color:var(--brand-100); color:var(--brand-700) }
.duechip { display:inline-flex; align-items:center; gap:7px; font-weight:700; color:var(--ink-800); white-space:nowrap } .duechip.late { color:var(--bad) } .duechip.today { color:var(--brand-600) }

/* ---------- tables ---------- */
.scrollx { overflow-x:auto; margin:0 -8px; padding:0 8px }
table.grid { width:100%; border-collapse:separate; border-spacing:0 }
.grid th { text-align:left; font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-400); padding:0 12px 12px; border-bottom:1px solid var(--ink-100); white-space:nowrap }
.grid td { padding:14px 12px; border-bottom:1px solid var(--ink-100); vertical-align:middle; transition:background .2s }
.grid tbody tr:hover td { background:var(--cream-50) } .grid tbody tr:last-child td { border-bottom:0 }
.grid tr.completed td { color:var(--ink-400) } .grid tr.completed .tname { text-decoration:line-through; text-decoration-color:var(--ink-200); color:var(--ink-400) }
.grid td:first-child { border-left:3px solid transparent } .grid tr.prio-primary td:first-child { border-left-color:var(--brand) } .grid tr.is-overdue td:first-child { border-left-color:var(--bad) }
.tname { font-weight:700; color:var(--ink-900); font-size:14.5px } .tid { color:var(--ink-300); font-weight:700; font-variant-numeric:tabular-nums }
.actions { white-space:nowrap; text-align:right } .actions form { display:inline-block; margin-left:4px } .elapsed { font-variant-numeric:tabular-nums; font-weight:700; color:var(--ink-800) }
.empty { text-align:center; padding:46px 20px; color:var(--ink-400) } .empty .tile { width:56px; height:56px; border-radius:20px; margin:0 auto 14px; display:grid; place-items:center; background:var(--brand-50); border:1px solid var(--brand-100); color:var(--brand) } .empty b { display:block; color:var(--ink-800); font-size:16px; margin-bottom:4px }

/* ---------- employee task cards ---------- */
.sect { display:flex; align-items:center; gap:12px; margin:30px 0 14px; font-size:11.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-500) } .sect::after { content:""; flex:1; height:1px; background:var(--ink-100) } .sect i { font-style:normal; background:var(--ink-900); color:#fff; border-radius:999px; padding:2px 9px; letter-spacing:0 }
.tcards { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:16px }
.tcard { position:relative; display:flex; flex-direction:column; gap:14px; background:#fff; border:1px solid var(--ink-100); border-radius:20px; padding:20px; box-shadow:var(--shadow); transition:all .35s var(--ease); animation:rise .6s var(--ease) both; animation-delay:calc(var(--i,0) * 60ms); overflow:hidden }
.tcard:hover { border-color:var(--brand); box-shadow:var(--glow); transform:translateY(-3px) }
.tcard::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--ink-100) } .tcard.primary::before { background:linear-gradient(var(--brand-300),var(--brand-600)) } .tcard.late::before { background:var(--bad) }
.tcard.completed { background:var(--cream-50); box-shadow:none } .tcard.completed h3 { color:var(--ink-400); text-decoration:line-through; text-decoration-color:var(--ink-200) }
.tcard .top { display:flex; align-items:center; gap:8px; flex-wrap:wrap } .tcard h3 { font-size:17px; font-weight:800; line-height:1.3 } .tcard h3 a { text-decoration:none } .tcard h3 a:hover { color:var(--brand) }
.tcard .meta { display:flex; flex-wrap:wrap; gap:8px 16px; font-size:13px; color:var(--ink-500) } .tcard .meta span { display:inline-flex; align-items:center; gap:6px }
.tcard .note { font-size:12.5px; background:var(--cream); border:1px dashed var(--ink-200); border-radius:12px; padding:8px 12px; color:var(--ink-600) } .tcard .note b { color:var(--ink-900) }
.tcard .foot { margin-top:auto; padding-top:14px; border-top:1px solid var(--ink-100); display:flex; flex-wrap:wrap; gap:8px; align-items:center }
.tcard .foot form { display:flex; gap:6px; align-items:center } .tcard .foot .re { flex:1 1 200px } .tcard .foot .re select { flex:1 }
.livebar { height:4px; border-radius:4px; background:#DBEAFE; overflow:hidden } .livebar::after { content:""; display:block; height:100%; width:40%; border-radius:4px; background:#2563EB; animation:slide 1.8s ease-in-out infinite } @keyframes slide { from { margin-left:-40% } to { margin-left:100% } }

/* ---------- task page ---------- */
.taskhero { max-width:720px; margin:10px auto 0; text-align:center; padding:48px 40px 44px; border-radius:28px }
.taskhero h1 { font-size:clamp(1.7rem,3.4vw,2.6rem); font-weight:800; line-height:1.12; letter-spacing:-.03em; margin:20px 0 22px }
.facts { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-bottom:8px } .facts .chip { font-size:13px; padding:7px 14px }
.timer { font-variant-numeric:tabular-nums; font-weight:800; font-size:clamp(2.6rem,7vw,4.4rem); letter-spacing:-.02em; line-height:1; margin:28px auto 12px; padding:22px 36px; border-radius:24px; display:inline-block }
.timer.running { color:#fff; background:var(--ink-900); box-shadow:0 0 0 6px rgba(228,113,39,.16), 0 30px 60px -30px rgba(228,113,39,.8); animation:pulse 2.4s var(--ease) infinite } .timer.done { color:var(--ok); background:var(--ok-bg); border:1px solid var(--ok-line) }
@keyframes pulse { 50% { box-shadow:0 0 0 14px rgba(228,113,39,.06), 0 30px 60px -30px rgba(228,113,39,.8) } }
.started { color:var(--ink-500); font-weight:600; max-width:46ch; margin:6px auto 0 } .taskhero .re { display:flex; gap:8px; max-width:460px; margin:26px auto 0; padding-top:24px; border-top:1px solid var(--ink-100) }

/* ---------- org chart ---------- */
h2.sub { font-size:16px; font-weight:800; margin:30px 0 6px; padding-top:22px; border-top:1px solid var(--ink-100) }
.org, .org ul { list-style:none; margin:0; padding:0 } .org ul { margin-left:22px; padding-left:24px; border-left:2px dashed var(--brand-200) }
.org li { position:relative; padding-top:10px } .org ul > li::before { content:""; position:absolute; left:-24px; top:40px; width:22px; border-top:2px dashed var(--brand-200) }
.org summary { list-style:none; cursor:pointer } .org summary::-webkit-details-marker { display:none }
.person { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--ink-100); border-radius:16px; padding:10px 14px; max-width:780px; transition:all .3s var(--ease) }
.org summary:hover .person { border-color:var(--brand); box-shadow:var(--glow) } .person.inactive { opacity:.5 }
.person.bh { background:var(--ink-900); border-color:var(--ink-900); color:rgba(255,255,255,.65) } .person.bh b { color:#fff } .person.bh .pinfo small { color:rgba(255,255,255,.55) } .person.bh .chip { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.15); color:#fff }
.org details > summary .person::after { content:""; flex:none; width:8px; height:8px; border-right:2px solid var(--ink-300); border-bottom:2px solid var(--ink-300); transform:rotate(-45deg); transition:transform .3s var(--ease); margin:0 4px 0 6px } .org details[open] > summary .person::after { transform:rotate(45deg) }
.pinfo { flex:1; min-width:0; display:flex; flex-direction:column } .pinfo b { color:var(--ink-900) } .pinfo small { color:var(--ink-500); font-size:12.5px; overflow-wrap:anywhere } .pinfo small.mail { color:var(--ink-300) }
.pmeta { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end }
.org.flat { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:0 14px }

/* ---------- login ---------- */
.auth { min-height:100vh; display:grid; grid-template-columns:1.1fr 1fr }
.auth .panel { position:relative; isolation:isolate; overflow:hidden; background:var(--ink-900); color:rgba(255,255,255,.7); padding:48px 56px; display:flex; flex-direction:column; justify-content:space-between }
.auth .panel::before { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(60% 50% at 90% 8%, rgba(228,113,39,.5), transparent 65%), radial-gradient(50% 40% at 0% 100%, rgba(228,113,39,.22), transparent 65%) }
.auth .panel::after { content:""; position:absolute; inset:0; z-index:-1; background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px), radial-gradient(circle at 0 0, rgba(228,113,39,.8) 2px, transparent 2.5px); background-size:60px 60px }
.auth .panel img { height:30px; width:auto; align-self:flex-start } .auth .panel h1 { color:#fff; font-size:clamp(2.2rem,4.2vw,3.8rem); font-weight:800; line-height:1.02; letter-spacing:-.035em; margin:22px 0 18px } .auth .panel p { font-size:16px; max-width:44ch; margin:0 }
.auth .panel .eyebrow { background:rgba(228,113,39,.16); border-color:rgba(228,113,39,.35); color:var(--brand-300) }
.miniboard { display:grid; gap:10px; max-width:460px; margin-top:34px } .miniboard div { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:16px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(6px); color:#fff; font-weight:600; font-size:13.5px; animation:rise .8s var(--ease) both } .miniboard div:nth-child(2) { animation-delay:.12s; margin-left:26px } .miniboard div:nth-child(3) { animation-delay:.24s; margin-left:52px }
.miniboard i { width:9px; height:9px; border-radius:50%; background:var(--brand); flex:none } .miniboard div:nth-child(2) i { background:#60A5FA; animation:blink 1.1s infinite } .miniboard div:nth-child(3) i { background:#34D399 } .miniboard small { margin-left:auto; color:rgba(255,255,255,.5); font-weight:700; letter-spacing:.1em; font-size:10.5px; text-transform:uppercase }
.auth .trust { display:flex; gap:32px; flex-wrap:wrap } .auth .trust b { display:block; color:#fff; font-size:20px; font-weight:800 } .auth .trust span { font-size:12.5px }
.auth .formside { display:grid; place-items:center; padding:40px 24px; position:relative; isolation:isolate } .auth .formside::before { content:""; position:absolute; inset:0; z-index:-1; background-image:radial-gradient(circle at 1px 1px, rgba(228,113,39,.18) 1px, transparent 0); background-size:22px 22px }
.auth .box { width:100%; max-width:400px; background:#fff; border:1px solid var(--ink-100); border-radius:28px; padding:38px 34px; box-shadow:0 30px 60px -30px rgba(10,10,10,.3); animation:rise .7s var(--ease) both } .auth .box h2 { font-size:26px; font-weight:800; margin:14px 0 6px } .auth .box p { margin:0 0 24px; color:var(--ink-500) } .auth .box .btn { width:100%; height:50px; font-size:15px; margin-top:4px }
.solo { min-height:100vh; display:grid; place-items:center; padding:24px } .solo .box { max-width:460px; text-align:center; background:#fff; border:1px solid var(--ink-100); border-radius:28px; padding:44px 36px; box-shadow:var(--shadow) } .solo h1 { font-size:26px; font-weight:800; margin:16px 0 8px }

/* ---------- responsive ---------- */
@media (max-width:1100px) { .kpis { grid-template-columns:repeat(3,1fr) } }
@media (max-width:900px) {
  .shell { display:block } .side { position:sticky; top:0; z-index:20; height:auto; flex-direction:row; align-items:center; gap:10px; padding:10px 14px; overflow-x:auto }
  .side .brand { padding:0 6px 0 0; flex:none } .side .brand span, .side .navlabel, .side .me b, .side .me small, .side .me .ava, .side nav a .ext { display:none } .side .brand img { height:20px }
  .side nav { flex-direction:row; flex:1 } .side nav a { padding:9px 12px; white-space:nowrap; font-size:13px } .side nav a .lbl { display:none } .side nav a.on .lbl { display:inline }
  .side .me { margin:0; padding:0; background:none; border:0 }
  .wrap { padding:22px 16px 48px } .auth { grid-template-columns:1fr } .auth .panel { padding:32px 24px; gap:26px } .miniboard, .auth .trust { display:none }
  .kpis { grid-template-columns:repeat(2,1fr) } .kpi b { font-size:28px } .card { padding:18px 16px; border-radius:18px } .pmeta { display:none }
  .org ul { margin-left:8px; padding-left:14px } .org ul > li::before { left:-14px; width:12px } .org.flat, .tcards { grid-template-columns:1fr } #dir, table.wide { min-width:820px } .taskhero { padding:34px 20px }
}
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important } }
/* keep the composer and the filter bar on one row on desktop */
@media (min-width:1101px) { .row-form { flex-wrap:nowrap } .row-form label { flex:1 1 0; min-width:0 } .row-form label.wide { flex:2.2 1 0 } .row-form.wraps { flex-wrap:wrap } }
.link, a.link { text-decoration:none } .tiny a.link { text-decoration:underline; text-underline-offset:3px }
.mailst { font-weight:700 } .mailst.sent { color:var(--ok) } .mailst.failed { color:var(--bad) } .mailst.skipped { color:var(--ink-400) }
.ava { background:linear-gradient(135deg, hsl(var(--h,22) 82% 64%), hsl(calc(var(--h,22) - 6) 74% 42%)) }
.grid .who b { white-space:nowrap } .tcard .foot .re { flex:1 1 150px; min-width:0 }
.side .me span:nth-child(2) { min-width:0 } .side .me small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:130px }
.kpis.four { grid-template-columns:repeat(4,1fr) }
@media (max-width:900px) { .kpis.four { grid-template-columns:repeat(2,1fr) } .side .me > span:nth-child(2), .side .me small { display:none } .side .me button { margin-left:0 } .side { overflow:visible } .side nav { overflow-x:auto } }
.grid.tight td, .grid.tight th { padding-left:8px; padding-right:8px }
/* ---------- roles & access ---------- */
.legend { display:flex; gap:18px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-500) } .legend span { display:inline-flex; align-items:center; gap:7px } .legend b { color:var(--ink-800) }
.legend i { width:10px; height:10px; border-radius:50% } i.l0 { background:var(--ink-200) } i.l1 { background:#60A5FA } i.l2 { background:var(--brand) }
.rolehead { display:flex; align-items:center; gap:14px; margin-bottom:20px; padding-bottom:18px; border-bottom:1px solid var(--ink-100) } .rolehead h2 { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:20px; font-weight:800 } .rolehead p { margin:3px 0 0 }
.rolehead .tile { width:46px; height:46px; border-radius:16px; display:grid; place-items:center; flex:none; background:var(--brand-50); border:1px solid var(--brand-100); color:var(--brand) } .role:target { border-color:var(--brand); box-shadow:var(--glow) }
.rolegrid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:34px }
.perm { display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--ink-100) } .perm:last-of-type { border-bottom:0 } .perm b { color:var(--ink-900) } .perm small { display:block; color:var(--ink-500); font-size:12px; line-height:1.45; margin-top:2px } .perm .pv { font-weight:700; color:var(--ink-700) }
.ptile { width:36px; height:36px; border-radius:12px; display:grid; place-items:center; flex:none; background:var(--cream); border:1px solid var(--ink-100); color:var(--ink-600) }
.seg.lv { flex:none } .seg.lv label { padding:0 13px; font-size:12.5px } .seg.lv input:checked + label.l0 { background:var(--ink-200); color:var(--ink-700) } .seg.lv input:checked + label.l1 { background:#DBEAFE; color:#1D4ED8 } .seg.lv input:checked + label.l2 { background:var(--brand); color:#fff }
.seg input:disabled + label { cursor:not-allowed; opacity:.45 } .seg input:disabled:checked + label { opacity:1 }
.rolefoot { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:18px }
.mlist { display:flex; flex-direction:column; gap:8px } .mchip { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--ink-100); border-radius:14px; background:var(--cream-50) } .mchip.off { opacity:.5 } .mchip b { display:block; color:var(--ink-900); font-size:13.5px; line-height:1.2 } .mchip small { color:var(--ink-400); font-size:11.5px }
details.more { margin-top:8px } details.more summary { cursor:pointer; font-size:12.5px; font-weight:700; color:var(--brand-700); padding:6px 2px; list-style:none } details.more summary::-webkit-details-marker { display:none } details.more[open] summary { margin-bottom:8px }
.addm { display:flex; gap:8px; margin-top:16px; padding-top:16px; border-top:1px solid var(--ink-100) } .addm select { flex:1 } .btn:disabled { opacity:.4; cursor:not-allowed }
@media (max-width:900px) { .rolegrid { grid-template-columns:1fr; gap:22px } .perm { flex-wrap:wrap } .perm .grow { flex:1 1 60% } .seg.lv { margin-left:50px } .legend { gap:10px } }
.ava.sm { width:26px; height:26px; font-size:10px } .cby { font-weight:600; color:var(--ink-600); white-space:nowrap; font-size:13.5px }
@media (max-width:1400px) { .grid.wide td, .grid.wide th { padding-left:8px; padding-right:8px } .grid .ava.sm { display:none } }
@media (max-width:1400px) { .grid.wide .who b, .grid.wide .cby { white-space:normal } .grid.wide .who .ava { width:32px; height:32px; font-size:11.5px } }
.mailst { white-space:nowrap }
.auth .box p.alt { margin:20px 0 0; text-align:center; font-size:13.5px } .auth .box p.alt .hl { font-weight:700 } .auth .box p.alt a:hover { text-decoration:underline }
.side .me .mebtn { margin-left:auto; color:rgba(255,255,255,.55); padding:8px; border-radius:10px; display:grid; place-items:center; transition:all .2s } .side .me .mebtn:hover { color:#fff; background:rgba(255,255,255,.1) } .side .me .mebtn + form button { margin-left:0 }
@media (max-width:900px) { .side .me .mebtn { margin-left:0 } }
/* multi-line task text */
textarea { font:inherit; font-size:14.5px; font-weight:500; line-height:1.55; color:var(--ink-900); width:100%; min-height:112px; max-height:360px; resize:vertical; padding:14px 16px; border:1px solid var(--ink-200); border-radius:18px; background:#fff; outline:none; transition:border-color .2s, box-shadow .2s, background .2s }
textarea::placeholder { color:var(--ink-300) } textarea:focus { border-color:var(--ink-900); box-shadow:0 0 0 4px rgba(10,10,10,.05) }
.card.dark textarea { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14); color:#fff } .card.dark textarea::placeholder { color:rgba(255,255,255,.32) } .card.dark textarea:focus { border-color:var(--brand-300); background:rgba(255,255,255,.1); box-shadow:none }
.row-form label.full { flex:1 1 100% } .hint { font-size:11.5px; font-weight:500; color:var(--ink-400) } .card.dark .hint { color:rgba(255,255,255,.4) }
.ml { white-space:pre-line; overflow-wrap:anywhere } .tname.ml { font-weight:700 } .grid tr.completed .tname.ml { text-decoration-thickness:1px }
.taskhero h1.long { font-size:clamp(1.15rem,1.9vw,1.45rem); line-height:1.5; letter-spacing:-.01em; font-weight:700; text-align:left; background:var(--cream); border:1px solid var(--ink-100); border-radius:18px; padding:18px 22px }
@media (min-width:1101px) { .row-form.wraps label:not(.full):not(.wide) { flex:1 1 0 } }
a.tname { display:block; text-decoration:none } a.tname:hover { color:var(--brand) } .clamp { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden } .tcard h3.ml { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:7; overflow:hidden }
a.tname.clamp { display:-webkit-box }
/* ---------- searchable person picker (combo.js) ---------- */
.cb { position:relative; font-weight:500 } .cb-field { font:inherit; width:100%; height:44px; display:flex; align-items:center; gap:10px; padding:0 12px 0 6px; border:1px solid var(--ink-200); border-radius:14px; background:#fff; color:var(--ink-900); cursor:pointer; text-align:left; outline:none; transition:all .2s var(--ease) }
.cb-field:focus-visible, .cb.open .cb-field { border-color:var(--ink-900); box-shadow:0 0 0 4px rgba(10,10,10,.05) } .cb.bad .cb-field { border-color:#F87171; box-shadow:0 0 0 4px rgba(248,113,113,.18) }
.cb-value { flex:1; min-width:0; display:flex; align-items:center; gap:9px; font-size:14px } .cb-value b { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .cb-ph { padding-left:8px; color:var(--ink-400) }
.cb-chev { flex:none; color:var(--ink-400); transition:transform .25s var(--ease) } .cb.open .cb-chev { transform:rotate(180deg) }
.cb-ava { flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:800; color:#fff; background:linear-gradient(135deg, hsl(var(--h) 82% 64%), hsl(calc(var(--h) - 6) 74% 42%)); box-shadow:inset 0 1px 0 rgba(255,255,255,.35) }
.cb-text { min-width:0; display:flex; flex-direction:column; line-height:1.25 } .cb-text b { font-weight:600; font-size:14px; color:inherit; white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .cb-text small { font-size:12px; color:var(--ink-400); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.cb-panel { position:absolute; z-index:40; top:calc(100% + 8px); left:0; width:max(100%, 340px); background:#fff; color:var(--ink-800); border:1px solid var(--ink-100); border-radius:18px; box-shadow:0 1px 2px rgba(10,10,10,.06), 0 24px 48px -16px rgba(10,10,10,.35); overflow:hidden; transform-origin:top center; animation:cbin .22s var(--ease) both }
@keyframes cbin { from { opacity:0; transform:translateY(-6px) scale(.985) } }
.cb-search { display:flex; align-items:center; gap:10px; padding:0 14px; border-bottom:1px solid var(--ink-100); color:var(--ink-400) }
.cb-search input, .card.dark .cb-search input { flex:1; height:48px; border:0; border-radius:0; padding:0; background:transparent; color:var(--ink-900); font-size:14px; box-shadow:none } .cb-search input::placeholder, .card.dark .cb-search input::placeholder { color:var(--ink-300) } .card.dark .cb-search input:focus { background:transparent }
.cb-list { list-style:none; margin:0; padding:6px; max-height:296px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--ink-200) transparent }
.cb-list li { display:flex; align-items:center; gap:11px; padding:8px 10px; border-radius:12px; cursor:pointer; font-weight:500 } .cb-list li.on { background:var(--brand-50) } .cb-list li[aria-selected="true"] b { color:var(--brand-700) }
.cb-tick { margin-left:auto; flex:none; color:var(--brand) } .cb-list li.cb-none { cursor:default; justify-content:center; padding:26px 10px; color:var(--ink-400); font-size:13.5px }
.cb-foot { padding:9px 16px; border-top:1px solid var(--ink-100); background:var(--cream-50); font-size:11.5px; font-weight:600; color:var(--ink-400); letter-spacing:.02em }
/* inside the dark composer: only the closed field is dark, the open panel stays a clean white sheet */
.card.dark .cb-field { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14); color:#fff } .card.dark .cb.open .cb-field, .card.dark .cb-field:focus-visible { border-color:var(--brand-300); background:rgba(255,255,255,.1); box-shadow:none } .card.dark .cb-ph { color:rgba(255,255,255,.45) } .card.dark .cb-chev { color:var(--brand-300) }
/* let the panel escape the composer card and sit above the cards that follow it */
.card.dark { overflow:visible; z-index:5 } .card.dark::before { border-radius:inherit }
@media (max-width:900px) { .cb-panel { width:100% } .cb-list { max-height:240px } }

/* =====================================================================================================
   LIGHT THEME (2026-09-18): the user found the near-black surfaces too heavy. Everything that was ink-900
   is now a warm light surface: white / cream with orange washes. Orange stays the single strong colour.
   ===================================================================================================== */
/* sidebar */
.side { background:#fff; color:var(--ink-600); border-right:1px solid var(--ink-100) }
.side::before { background:radial-gradient(90% 26% at 100% 0%, rgba(228,113,39,.16), transparent 70%), radial-gradient(80% 22% at 0% 100%, rgba(228,113,39,.10), transparent 70%) }
.side::after { opacity:1; background-image:radial-gradient(circle at 1px 1px, rgba(228,113,39,.13) 1px, transparent 0) }
.side .brand span { color:var(--brand-600) } .side .navlabel { color:var(--ink-300) }
.side nav a { color:var(--ink-600) } .side nav a:hover { color:var(--ink-900); background:var(--cream) }
.side nav a.on { color:#fff; background:linear-gradient(90deg,var(--brand),var(--brand-400)); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 10px 22px -12px rgba(228,113,39,.85) }
.side .me { background:var(--cream-50); border-color:var(--ink-100) } .side .me b { color:var(--ink-900) } .side .me small { color:var(--ink-400) }
.side .me button, .side .me .mebtn { color:var(--ink-400) } .side .me button:hover, .side .me .mebtn:hover { color:var(--brand-600); background:var(--brand-50) }
@media (max-width:900px) { .side { border-right:0; border-bottom:1px solid var(--ink-100) } }

/* the former dark panels (assign a task, add a person, create a role) become a warm highlighted card */
.card.dark { background:linear-gradient(135deg,#FFF9F4 0%,#FFFFFF 55%,#FEF3EC 100%); color:var(--ink-600); border-color:var(--brand-100); box-shadow:0 1px 2px rgba(10,10,10,.04), 0 18px 36px -24px rgba(228,113,39,.45) }
.card.dark::before { background:radial-gradient(45% 120% at 100% 0%, rgba(228,113,39,.16), transparent 65%), radial-gradient(circle at 1px 1px, rgba(228,113,39,.14) 1px, transparent 0); background-size:auto, 22px 22px }
.card.dark h2 { color:var(--ink-900) } .card.dark label { color:var(--ink-600) } .card.dark .tiny, .card.dark .hint { color:var(--ink-400) }
.card.dark input, .card.dark select, .card.dark textarea { background:#fff; border-color:var(--ink-200); color:var(--ink-900) }
.card.dark input::placeholder, .card.dark textarea::placeholder { color:var(--ink-300) }
.card.dark input:focus, .card.dark select:focus, .card.dark textarea:focus { border-color:var(--brand); background:#fff; box-shadow:0 0 0 4px rgba(228,113,39,.14) }
.card.dark input[type=date] { color-scheme:light }
.card.dark select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23E47127' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center }
.card.dark .seg { background:#fff; border-color:var(--ink-200) } .card.dark .seg label { color:var(--ink-500) } .card.dark .seg input:checked + label { background:var(--brand); color:#fff }
.card.dark .cb-field { background:#fff; border-color:var(--ink-200); color:var(--ink-900) } .card.dark .cb.open .cb-field, .card.dark .cb-field:focus-visible { border-color:var(--brand); background:#fff; box-shadow:0 0 0 4px rgba(228,113,39,.14) } .card.dark .cb-ph { color:var(--ink-400) } .card.dark .cb-chev { color:var(--brand) }

/* controls that were solid black */
.btn.dark { background:var(--brand-50); border-color:var(--brand-100); color:var(--brand-700) } .btn.dark:hover { background:var(--brand); border-color:var(--brand); color:#fff }
.btn:hover { border-color:var(--brand) } input:focus, select:focus, textarea:focus { border-color:var(--brand); box-shadow:0 0 0 4px rgba(228,113,39,.14) }
.cb-field:focus-visible, .cb.open .cb-field { border-color:var(--brand); box-shadow:0 0 0 4px rgba(228,113,39,.14) }
.seg input:checked + label { background:var(--brand); color:#fff } .sect i { background:var(--brand-50); color:var(--brand-700); border:1px solid var(--brand-100) }
.timer.running { color:#fff; background:linear-gradient(135deg,var(--brand-400),var(--brand-600)); box-shadow:0 0 0 6px rgba(228,113,39,.16), 0 30px 60px -30px rgba(228,113,39,.8) }
.person.bh { background:linear-gradient(135deg,#FFF4EA,#FFFFFF); border-color:var(--brand-200); color:var(--ink-600) } .person.bh b { color:var(--ink-900) } .person.bh .pinfo small { color:var(--ink-500) } .person.bh .pinfo small.mail { color:var(--ink-300) } .person.bh .chip { background:var(--brand-50); border-color:var(--brand-100); color:var(--brand-700) }

/* login: light brand panel with the signature graph-paper + orange intersection dots */
.auth .panel { background:var(--cream-200); color:var(--ink-600); border-right:1px solid var(--ink-100) }
.auth .panel::before { background:radial-gradient(60% 50% at 90% 6%, rgba(228,113,39,.30), transparent 65%), radial-gradient(50% 40% at 0% 100%, rgba(228,113,39,.16), transparent 65%), linear-gradient(180deg,var(--cream-50),var(--cream-200)) }
.auth .panel::after { background-image:linear-gradient(rgba(15,15,15,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(15,15,15,.07) 1px, transparent 1px), radial-gradient(circle at 0 0, rgba(228,113,39,.7) 2px, transparent 2.5px); background-size:60px 60px }
.auth .panel h1 { color:var(--ink-900) } .auth .panel .eyebrow { background:var(--brand-50); border-color:var(--brand-100); color:var(--brand-700) }
.miniboard div { background:rgba(255,255,255,.85); border-color:var(--ink-100); color:var(--ink-800); box-shadow:0 10px 24px -18px rgba(10,10,10,.35) } .miniboard small { color:var(--ink-400) }
.auth .trust b { color:var(--ink-900) } .auth .trust span { color:var(--ink-500) }
.cb .cb-search input, .cb .cb-search input:focus { border:0; box-shadow:none; background:transparent }
.auth .box p.alt .hl { color:var(--brand-600) }
.side .me > span:nth-child(2) { flex:1; min-width:0 } .side .me b, .side .me small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100% } .side .me { gap:8px; padding:10px } .side .me .mebtn, .side .me button { padding:6px }