:root {
  --bg: #f6f8f7; --card: #fff; --ink: #0f1a14; --ink2: #3c4a42; --muted: #7a877f; --line: #e7ece9; --line2: #f0f3f1;
  --g: #148a52; --g2: #1fa866; --g-soft: #e8f6ee; --g-soft2: #f3faf6; --dark: #0d1512;
  --blue: #2f6fe4; --blue-soft: #eaf1fd; --amber: #c27a06; --amber-soft: #fdf4e3; --red: #d23b3b; --red-soft: #fdecec;
  --purple: #7a4ad8; --purple-soft: #f2edfd; --r: 14px; --shadow: 0 1px 2px rgba(16,24,20,.04), 0 2px 10px rgba(16,24,20,.04);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.45 Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--g); text-decoration: none; } a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
.hidden { display: none !important; }
.muted { color: var(--muted); } .small { font-size: 12px; } .tiny { font-size: 11px; }
.nowrap { white-space: nowrap; } .right { text-align: right; } .center { text-align: center; }
.row { display: flex; gap: 12px; align-items: center; } .row.wrap { flex-wrap: wrap; } .grow { flex: 1; min-width: 0; }
.stack > * + * { margin-top: 12px; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Layout */
.app { display: flex; min-height: 100vh; }
.sidebar { width: 236px; flex: none; background: #fff; border-right: 1px solid var(--line); padding: 18px 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; }
.brand { display: flex; gap: 10px; align-items: center; padding: 2px 6px 16px; }
.brand b { display: block; font-size: 16px; letter-spacing: -.01em; } .brand small { color: var(--muted); font-size: 11px; }
.logo { width: 34px; height: 34px; border-radius: 10px; background: var(--dark); color: #fff; display: grid; place-items: center; font-size: 18px; }
nav .sec { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 16px 10px 6px; }
nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--ink2); font-weight: 500; font-size: 13.5px; }
nav a:hover { background: var(--line2); text-decoration: none; }
nav a.active { background: var(--dark); color: #fff; }
nav a .ic { width: 18px; text-align: center; opacity: .8; }
nav a .tag { margin-left: auto; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 6px; background: var(--g-soft); color: var(--g); }
nav a.active .tag { background: rgba(255,255,255,.15); color: #fff; }
.side-foot { margin-top: auto; padding-top: 16px; }
.auto-card { background: var(--g-soft2); border: 1px solid #d8eee2; border-radius: 12px; padding: 12px; font-size: 12px; color: var(--ink2); }
.auto-card b { color: var(--ink); display: block; margin-bottom: 4px; font-size: 13px; }
.main { flex: 1; min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; gap: 14px; align-items: center; padding: 12px 24px; background: rgba(246,248,247,.85); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.search { flex: 1; max-width: 520px; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 7px 12px; }
.search input { border: 0; outline: 0; flex: 1; background: transparent; }
.search kbd { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; }
.top-right { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.site-select { border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 7px 10px; font-weight: 600; max-width: 260px; }
.icon-btn { border: 1px solid var(--line); background: #fff; border-radius: 10px; width: 34px; height: 34px; cursor: pointer; }
.menu { display: none; }
.view { padding: 22px 24px 60px; max-width: 1480px; }
.job-badge { font-size: 12px; background: var(--g-soft); color: var(--g); border-radius: 10px; padding: 6px 10px; display: flex; gap: 8px; align-items: center; max-width: 320px; }
.job-badge .ellipsis { max-width: 240px; }
.spin { width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Cards */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 16px; }
.card h3 { margin: 0 0 12px; font-size: 14.5px; display: flex; align-items: center; gap: 8px; }
.card h3 .sub { font-weight: 500; color: var(--muted); font-size: 12px; }
.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mt { margin-top: 14px; } .mt2 { margin-top: 22px; }

/* Page header */
.hero { display: flex; gap: 16px; align-items: center; background: linear-gradient(90deg, #ecf8f1, #f8fcfa 60%); border: 1px solid #dcefe4; border-radius: var(--r); padding: 18px 20px; }
.hero .hico { width: 52px; height: 52px; border-radius: 50%; background: #fff; border: 1px solid #d3ebde; display: grid; place-items: center; color: var(--g); font-size: 24px; flex: none; }
.hero h1 { margin: 0; font-size: 24px; letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; }
.hero p { margin: 4px 0 0; color: var(--ink2); max-width: 560px; }
.badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--g); color: #fff; letter-spacing: 0; }
.steps { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.step { display: flex; gap: 8px; align-items: center; font-size: 12px; font-weight: 600; color: var(--ink2); padding: 6px 8px; }
.step i { width: 30px; height: 30px; border-radius: 9px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; font-style: normal; }
.steps .sep { color: #b9c4bd; }
.page-h { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 16px; }
.page-h h1 { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.page-h p { margin: 2px 0 0; color: var(--muted); }
.page-h .actions { margin-left: auto; display: flex; gap: 8px; }

/* KPI */
.kpi { display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden; }
.kpi .top { display: flex; gap: 12px; align-items: center; }
.kpi .ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; flex: none; }
.kpi .lbl { color: var(--muted); font-size: 12.5px; font-weight: 500; }
.kpi .val { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.kpi .val small { font-size: 13px; color: var(--muted); font-weight: 500; margin-left: 4px; }
.kpi .foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.delta { font-size: 12px; font-weight: 600; white-space: nowrap; } .delta.up { color: var(--g); } .delta.down { color: var(--red); } .delta.flat { color: var(--muted); }
.ic-blue { background: var(--blue-soft); color: var(--blue); } .ic-green { background: var(--g-soft); color: var(--g); } .ic-purple { background: var(--purple-soft); color: var(--purple); } .ic-amber { background: var(--amber-soft); color: var(--amber); } .ic-red { background: var(--red-soft); color: var(--red); }

/* Buttons & inputs */
.btn { display: inline-flex; gap: 6px; align-items: center; justify-content: center; border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 8px 14px; font-weight: 600; font-size: 13px; cursor: pointer; white-space: nowrap; color: var(--ink); }
.btn:hover { border-color: #cfd8d3; text-decoration: none; }
.btn.primary { background: var(--g); border-color: var(--g); color: #fff; } .btn.primary:hover { background: #10794a; }
.btn.dark { background: var(--dark); border-color: var(--dark); color: #fff; }
.btn.soft { background: var(--g-soft); border-color: transparent; color: var(--g); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.danger { color: var(--red); }
.btn.sm { padding: 5px 10px; font-size: 12px; border-radius: 8px; }
.btn.xs { padding: 3px 8px; font-size: 11.5px; border-radius: 7px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; cursor: default; }
input[type=text], input[type=email], input[type=url], input[type=password], input[type=number], input[type=date], input[type=time], select, textarea, .input {
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px; background: #fff; outline: none; width: 100%; }
input:focus, select:focus, textarea:focus { border-color: var(--g2); box-shadow: 0 0 0 3px rgba(31,168,102,.12); }
textarea { resize: vertical; min-height: 80px; }
label.f { display: block; font-size: 12px; font-weight: 600; color: var(--ink2); margin-bottom: 12px; }
label.f > span { display: block; margin-bottom: 5px; }
label.f .hint { font-weight: 400; color: var(--muted); margin-top: 4px; display: block; }
.toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12.5px; font-weight: 500; user-select: none; }
.toggle input { display: none; }
.toggle i { width: 34px; height: 20px; border-radius: 20px; background: #d6ddd9; position: relative; transition: .15s; flex: none; }
.toggle i::after { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #fff; top: 2px; left: 2px; transition: .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.toggle input:checked + i { background: var(--g); } .toggle input:checked + i::after { left: 16px; }
.chip { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; background: #fff; }
.chip .dot { width: 18px; height: 18px; border-radius: 50%; background: var(--dark); color: #fff; font-size: 10px; display: grid; place-items: center; }
.status { display: inline-flex; gap: 5px; align-items: center; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.status.ok { background: var(--g-soft); color: var(--g); } .status.no { background: var(--amber-soft); color: var(--amber); } .status.bad { background: var(--red-soft); color: var(--red); }
.status.info { background: var(--blue-soft); color: var(--blue); } .status.gray { background: var(--line2); color: var(--muted); }

/* Tabs */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tab { border: 1px solid transparent; background: transparent; padding: 7px 12px; border-radius: 10px; font-weight: 600; font-size: 13px; color: var(--ink2); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.tab .n { font-size: 11px; background: var(--line2); color: var(--muted); padding: 0 6px; border-radius: 6px; }
.tab.active { background: var(--dark); color: #fff; } .tab.active .n { background: rgba(255,255,255,.18); color: #fff; }
.tab:not(.active):hover { background: var(--line2); }

/* Tables */
.tbl-wrap { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 11.5px; font-weight: 600; color: var(--muted); padding: 8px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th.sortable { cursor: pointer; } th.sortable:hover { color: var(--ink); }
td { padding: 9px 8px; border-bottom: 1px solid var(--line2); vertical-align: middle; font-size: 13px; }
tr.sel td { background: var(--g-soft2); }
tr.click { cursor: pointer; } tr.click:hover td { background: #fafcfb; } tr.sel.click:hover td { background: var(--g-soft2); }
td .kw { font-weight: 600; } td .sub { font-size: 11.5px; color: var(--muted); }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.pill { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px; white-space: nowrap; display: inline-block; }
.p-informational { background: var(--blue-soft); color: var(--blue); } .p-commercial { background: var(--amber-soft); color: var(--amber); }
.p-transactional { background: var(--red-soft); color: var(--red); } .p-navigational { background: var(--line2); color: var(--muted); }
.kd { display: inline-grid; place-items: center; min-width: 30px; height: 22px; border-radius: 6px; font-size: 11.5px; font-weight: 700; padding: 0 5px; }
.kd.e { background: #dff5e8; color: #117a46; } .kd.m { background: #fbf1d5; color: #946200; } .kd.h { background: #fde3dc; color: #b23a1d; }
.kd.est { outline: 1px dashed currentColor; outline-offset: -1px; background: transparent; }
.opp { display: flex; align-items: center; gap: 8px; min-width: 110px; }
.opp b { width: 22px; font-size: 13px; }
.bar { flex: 1; height: 6px; border-radius: 6px; background: var(--line2); overflow: hidden; } .bar > i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #6fd3a0, var(--g)); }
.pos { font-weight: 700; } .src { font-size: 10px; font-weight: 700; color: var(--g); background: var(--g-soft); border-radius: 4px; padding: 0 4px; margin-left: 4px; vertical-align: 1px; }
.src.e { color: var(--muted); background: var(--line2); }
.tbl-foot { display: flex; align-items: center; gap: 10px; padding-top: 12px; flex-wrap: wrap; }
.pager { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.pager button { min-width: 30px; height: 30px; border-radius: 8px; border: 1px solid transparent; background: transparent; cursor: pointer; font-weight: 600; }
.pager button.cur { background: var(--g); color: #fff; } .pager button:not(.cur):hover { background: var(--line2); }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0 6px; }
.filters .input, .filters select { width: auto; padding: 6px 10px; font-size: 12.5px; }
.filters .search-in { flex: 1; min-width: 160px; }

/* Radar layout */
.radar-main { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; align-items: start; }
.detail { position: sticky; top: 76px; }
.detail .kw-title { font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.mini-stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 12px; margin: 12px 0; }
.mini-stats div { padding: 10px; border-right: 1px solid var(--line); } .mini-stats div:last-child { border: 0; }
.mini-stats b { display: block; font-size: 18px; letter-spacing: -.02em; } .mini-stats span { font-size: 11px; color: var(--muted); }
.mini-stats .hl { background: var(--g-soft2); border-radius: 0 12px 12px 0; } .mini-stats .hl b { color: var(--g); }
.sect-t { font-size: 12.5px; font-weight: 700; margin: 14px 0 8px; display: flex; justify-content: space-between; align-items: center; }
.idea { display: flex; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line2); font-size: 12.5px; }
.idea:last-child { border: 0; }
.serp-row { display: flex; justify-content: space-between; font-size: 12.5px; padding: 3px 0; }
.gauge-wrap { display: grid; grid-template-columns: 130px 1fr; gap: 14px; align-items: center; }
.insight { background: var(--dark); color: #e9f2ed; border-color: var(--dark); }
.insight h3 { color: #fff; } .insight .chip { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); color: #fff; }
.insight .chip.g { background: rgba(31,168,102,.25); color: #8ee6b6; }
.clist { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.clist .c { border-right: 1px solid var(--line); padding-right: 10px; } .clist .c:last-child { border: 0; }
.clist .c b { display: block; font-size: 13px; } .clist .c span { font-size: 11.5px; color: var(--muted); }
.cbar { height: 4px; border-radius: 4px; background: var(--g-soft); margin-top: 8px; overflow: hidden; } .cbar i { display: block; height: 100%; background: var(--g); }
.gap-row { display: flex; gap: 10px; align-items: center; padding: 5px 0; font-size: 12.5px; }
.gap-row .bar { height: 7px; }

/* Lists */
.list-item { display: flex; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line2); }
.list-item:last-child { border: 0; }
.action-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; font-size: 15px; }
.feed { font-size: 12.5px; } .feed div { padding: 6px 0; border-bottom: 1px solid var(--line2); display: flex; gap: 8px; } .feed time { color: var(--muted); white-space: nowrap; }
.empty { text-align: center; padding: 40px 20px; color: var(--muted); }
.empty b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 4px; }
.setup-step { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line2); }
.setup-step .ck { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; border: 2px solid var(--line); color: var(--muted); }
.setup-step.done .ck { background: var(--g); border-color: var(--g); color: #fff; }
.ring { position: relative; width: 110px; height: 110px; } .ring .t { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.ring .t b { font-size: 26px; display: block; line-height: 1; } .ring .t span { font-size: 11px; color: var(--muted); }

/* Writer */
.writer { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px; align-items: start; }
.post-list { max-height: calc(100vh - 170px); overflow-y: auto; padding: 8px; }
.post-li { padding: 10px; border-radius: 10px; cursor: pointer; display: block; color: inherit; }
.post-li:hover { background: var(--line2); text-decoration: none; } .post-li.active { background: var(--g-soft); }
.post-li b { display: block; font-size: 13px; } .post-li span { font-size: 11.5px; color: var(--muted); }
.article { line-height: 1.7; font-size: 15px; max-width: 760px; }
.article h2 { font-size: 21px; margin: 26px 0 8px; } .article h3 { font-size: 17px; margin: 20px 0 6px; }
.article .key-takeaways { background: var(--g-soft2); border: 1px solid #d8eee2; border-radius: 12px; padding: 12px 16px; margin: 14px 0; }
.article table { border: 1px solid var(--line); } .article td, .article th { border: 1px solid var(--line); padding: 6px 10px; }
.article [contenteditable]:focus { outline: none; }
mark.add { background: #fff3c4; padding: 0 2px; border-radius: 3px; }
.outline-item { border-left: 3px solid var(--g-soft); padding: 4px 0 4px 12px; margin-bottom: 10px; }
.outline-item b { display: block; } .outline-item li { color: var(--ink2); font-size: 13px; }
pre.code { background: #0f1713; color: #cfe9da; padding: 12px; border-radius: 10px; font-size: 12px; overflow-x: auto; white-space: pre-wrap; }

/* Calendar */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.cal > div { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-height: 104px; padding: 6px; font-size: 12px; }
.cal .dh { min-height: 0; font-weight: 600; color: var(--muted); text-align: center; background: var(--line2); }
.cal .out { background: #fafbfa; color: #b5beb9; } .cal .today { background: var(--g-soft2); }
.cal .d { font-weight: 600; margin-bottom: 4px; }
.cal .ev { display: block; border-radius: 6px; padding: 3px 6px; margin-bottom: 3px; font-size: 11.5px; font-weight: 600; color: var(--ink); background: var(--line2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev.s-published, .ev.s-in_wordpress, .ev.s-scheduled { background: var(--g-soft); color: var(--g); } .ev.s-draft { background: var(--blue-soft); color: var(--blue); }
.ev.s-brief { background: var(--purple-soft); color: var(--purple); } .ev.s-planned, .ev.s-idea { background: var(--amber-soft); color: var(--amber); }

/* Guide */
.guide ol { padding-left: 0; list-style: none; counter-reset: s; margin: 0; }
.guide li { counter-increment: s; display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line2); }
.guide li::before { content: counter(s); width: 24px; height: 24px; border-radius: 50%; background: var(--g); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.guide .why { background: var(--g-soft2); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--ink2); margin-bottom: 8px; }

/* Modal & toasts */
.modal { position: fixed; inset: 0; background: rgba(10,18,14,.45); z-index: 100; display: grid; place-items: center; padding: 20px; }
.modal-box { background: #fff; border-radius: 16px; max-width: 640px; width: 100%; max-height: 88vh; overflow-y: auto; padding: 22px; position: relative; }
.modal-box.wide { max-width: 900px; }
.modal-box h2 { margin: 0 0 12px; font-size: 18px; }
.modal-x { position: absolute; top: 12px; right: 12px; border: 0; background: var(--line2); width: 30px; height: 30px; border-radius: 8px; font-size: 18px; cursor: pointer; }
.toasts { position: fixed; bottom: 18px; right: 18px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--dark); color: #fff; padding: 10px 14px; border-radius: 10px; font-size: 13px; max-width: 380px; box-shadow: 0 6px 20px rgba(0,0,0,.18); animation: tin .2s; }
.toast.err { background: var(--red); }
@keyframes tin { from { transform: translateY(8px); opacity: 0; } }

/* Login */
.login { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at 30% 20%, #e3f5eb, var(--bg) 60%); padding: 16px; }
.login-card { width: 100%; max-width: 380px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 26px; box-shadow: var(--shadow); }
.login-card h2 { margin: 6px 0 2px; } .login-card input { margin: 14px 0; } .err { color: var(--red); font-size: 13px; min-height: 18px; margin: 8px 0 0; }

.chart-tip { position: absolute; pointer-events: none; background: var(--dark); color: #fff; font-size: 11.5px; padding: 5px 8px; border-radius: 7px; white-space: nowrap; transform: translate(-50%, -120%); }
.chart-box { position: relative; }

@media (max-width: 1280px) { .g5 { grid-template-columns: repeat(3, minmax(0,1fr)); } .radar-main { grid-template-columns: 1fr; } .detail { position: static; } .steps { display: none; } }
@media (max-width: 900px) {
  .sidebar { position: fixed; left: -260px; z-index: 50; transition: left .2s; box-shadow: 0 0 40px rgba(0,0,0,.15); }
  .sidebar.open { left: 0; } .menu { display: inline-block; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; } .g5 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .writer { grid-template-columns: 1fr; } .clist { grid-template-columns: repeat(2, 1fr); }
  .view { padding: 16px; } .topbar { padding: 10px 16px; } .search kbd, #scanBtn span { display: none; }
  .cal > div { min-height: 70px; } .site-select { max-width: 140px; }
}

/* Planner */
.task { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: #fff; cursor: pointer; margin-bottom: 8px; transition: border-color .15s; }
.task:hover { border-color: #cfd8d3; } .task.done { opacity: .6; } .task.done .ttitle { text-decoration: line-through; }
.ttitle { font-weight: 600; font-size: 13.5px; }
.tchk { width: 20px; height: 20px; border-radius: 6px; border: 2px solid #c9d3cd; background: #fff; flex: none; cursor: pointer; font-size: 11px; color: #fff; padding: 0; margin-top: 1px; }
.task.done .tchk { background: var(--g); border-color: var(--g); }
.week { border-top: 1px solid var(--line); padding: 14px 0 6px; } .week:first-child { border-top: 0; padding-top: 0; }
.week-h { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.week.cur .week-h b { color: var(--g); }
.col { background: var(--line2); border-radius: 12px; padding: 10px; min-height: 200px; }
button.chip { cursor: pointer; } .chip.on { background: var(--dark); color: #fff; border-color: var(--dark); }
.kpi .ring { width: 70px; height: 70px; } .kpi .ring svg { width: 70px; height: 70px; } .kpi .ring .t b { font-size: 16px; } .kpi .ring .t span { font-size: 9px; }

.coach { margin-bottom: 14px; border-color: #bfe5cf; background: linear-gradient(90deg, #f0faf4, #fff); }
.explain { border: 1px solid #dbe8f9; background: #f5f9ff; border-radius: 12px; padding: 0; margin-bottom: 14px; font-size: 13px; }
.explain summary { cursor: pointer; padding: 10px 14px; font-weight: 600; color: var(--blue); list-style: none; }
.explain summary::-webkit-details-marker { display: none; }
.explain .ex-body { padding: 0 14px 12px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.explain .ex-body b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 3px; }
.wizard { max-width: 760px; margin: 0 auto; }
.wsteps { display: flex; gap: 6px; margin-bottom: 18px; }
.wsteps div { flex: 1; height: 6px; border-radius: 6px; background: var(--line); } .wsteps div.on { background: var(--g); }
.big-choice { border: 2px solid var(--line); border-radius: 14px; padding: 14px; cursor: pointer; } .big-choice.on { border-color: var(--g); background: var(--g-soft2); }
.tl-mark { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.verdict-win { color: var(--g); font-weight: 700; } .verdict-loss { color: var(--red); font-weight: 700; } .verdict-neutral { color: var(--muted); font-weight: 700; }
@media (max-width: 900px) { .explain .ex-body { grid-template-columns: 1fr; } }

/* ===== Beginner-first visual layer ===== */
.term { border-bottom: 1.5px dotted #7fb69a; cursor: help; }
.term:hover, .term:focus { background: var(--g-soft); outline: none; border-radius: 3px; }
.term-tip { position: absolute; z-index: 200; background: #0f1a14; color: #e9f2ed; border-radius: 12px; padding: 12px 14px; font-size: 12.5px; line-height: 1.45; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.term-tip b { display: block; color: #fff; font-size: 13.5px; margin: 2px 0 4px; }
.term-tip a { display: inline-block; margin-top: 8px; color: #8ee6b6; font-weight: 600; }
.tt-cat { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: #7fb69a; font-weight: 700; }
.mode-btn { white-space: nowrap; }
.help-btn { display: grid; place-items: center; font-weight: 800; color: var(--ink2); text-decoration: none !important; }
.verdict { display: flex; gap: 14px; align-items: flex-start; border-radius: var(--r); padding: 14px 16px; border: 1px solid; }
.verdict .grow > b:first-child { font-size: 15px; display: block; margin-bottom: 3px; }
.verdict .v-ic { font-size: 22px; line-height: 1; }
.v-good, .v-ok { background: #effaf4; border-color: #cfeadb; } .v-warn { background: #fff8ea; border-color: #f3dfb3; } .v-bad { background: #fff1f1; border-color: #f5cccc; } .v-info { background: #f3f8ff; border-color: #d6e4fb; }
.donut { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.legend { flex: 1; min-width: 160px; font-size: 12.5px; }
.legend div { display: flex; gap: 8px; align-items: center; padding: 3px 0; }
.legend i, .stack-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.hbars { display: flex; flex-direction: column; gap: 7px; }
.hb { display: grid; grid-template-columns: minmax(120px, 38%) 1fr auto; gap: 10px; align-items: center; font-size: 12.5px; }
.hb.clickable { cursor: pointer; } .hb.clickable:hover .hb-l { color: var(--g); }
.hb-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-bar { background: #f0f3f1; border-radius: 6px; height: 10px; overflow: hidden; } .hb-bar i { display: block; height: 100%; border-radius: 6px; }
.stackbar { display: flex; border-radius: 8px; overflow: hidden; background: #f0f3f1; } .stackbar i { display: block; height: 100%; }
.stack-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 12px; } .stack-legend span { display: inline-flex; gap: 6px; align-items: center; }
.pbar { height: 8px; background: #f0f3f1; border-radius: 6px; overflow: hidden; } .pbar i { display: block; height: 100%; }
.prov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.prov { border: 1px solid var(--line); border-radius: 12px; padding: 14px; } .prov.unconf { background: #fafbfa; }
.calc-total { font-size: 24px; font-weight: 800; color: var(--g); }
.bad-t { color: var(--red); }
.mono { font-family: ui-monospace, Menlo, monospace; font-size: 12px; width: 100%; }
.eng { display: flex; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line2); } .eng:last-child { border: 0; }
.eng-ic { width: 28px; height: 28px; border-radius: 8px; background: var(--dark); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.dotbtn { border: 0; background: none; cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 4px; } .dotbtn.c { color: var(--g); } .dotbtn.m { color: var(--amber); } .dotbtn.n { color: #b9c4be; }
.answer { background: #f7f9f8; border: 1px solid var(--line); border-radius: 10px; padding: 12px; font-size: 13px; max-height: 320px; overflow: auto; }
.sugg-list { max-height: 360px; overflow: auto; display: flex; flex-direction: column; gap: 4px; } .sugg-list input[type=text] { flex: 1; padding: 5px 8px; }
.insights { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.ins { border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--line); background: #fff; cursor: default; }
.ins[data-goto] { cursor: pointer; } .ins[data-goto]:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.ins-bad { border-left: 4px solid var(--red); } .ins-warn { border-left: 4px solid var(--amber); } .ins-good { border-left: 4px solid var(--g); } .ins-info { border-left: 4px solid var(--blue); }
.ins .lnk { color: var(--g); font-weight: 600; margin-top: 2px; }
.tox { display: inline-grid; place-items: center; min-width: 34px; height: 24px; border-radius: 7px; font-weight: 800; font-size: 12px; } .tox.r { background: var(--red-soft); color: var(--red); } .tox.a { background: var(--amber-soft); color: var(--amber); } .tox.g { background: var(--g-soft); color: var(--g); } .tox.gray { background: var(--line2); color: var(--muted); }
.mk-list { display: flex; flex-wrap: wrap; gap: 4px; max-width: 420px; }
.mk { font-size: 11px; padding: 1px 7px; border-radius: 6px; background: var(--line2); color: var(--ink2); cursor: help; }
.mk.g-harmful { background: var(--red-soft); color: var(--red); } .mk.g-network { background: var(--purple-soft); color: var(--purple); } .mk.g-manipulative { background: var(--amber-soft); color: var(--amber); } .mk.g-community { background: var(--blue-soft); color: var(--blue); }
.dot-l { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.bulk { display: inline-flex; gap: 6px; align-items: center; }
.shield-t { display: flex; gap: 10px; padding: 10px 12px; border-radius: 10px; margin-top: 8px; border: 1px solid var(--line); } .shield-t.ok { background: #effaf4; } .shield-t.high { background: #fff1f1; } .shield-t.medium, .shield-t.low { background: #fff8ea; }
.opp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.opp-card { display: flex; flex-direction: column; gap: 6px; } .opp-card.setup { background: #fafbfa; opacity: .85; } .opp-card.done { opacity: .7; }
.opp-card p { margin: 2px 0; }
.opp-ic { font-size: 20px; } .opp-n { background: var(--dark); color: #fff; border-radius: 999px; padding: 2px 10px; font-weight: 800; font-size: 13px; }
.opp-items { border-top: 1px solid var(--line2); margin-top: 4px; }
.opp-tile { text-align: left; cursor: pointer; font: inherit; } .opp-tile.on { outline: 2px solid var(--g); }
.learn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.learn-card { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line); border-radius: 12px; padding: 12px; color: var(--ink); text-decoration: none !important; background: #fff; }
.learn-card:hover { border-color: var(--g); box-shadow: var(--shadow); }
.learn-card .tt-cat { color: var(--g); }
.learn-sel .why { border-radius: 10px; padding: 12px; background: var(--g-soft2); font-size: 13px; }
.tile-ic { font-size: 18px; }
.kpi.center { align-items: center; justify-content: center; text-align: center; }
body:not(.expert) .adv { display: none !important; }
@media (max-width: 700px) { .hb { grid-template-columns: 1fr auto; } .hb .hb-bar { grid-column: 1 / -1; grid-row: 2; } .top-right .mode-btn { padding: 6px 8px; font-size: 12px; } .view { padding: 16px 16px 60px; } }
.month-row td { background: #f6f8f7; cursor: pointer; padding-top: 10px !important; padding-bottom: 10px !important; border-top: 2px solid var(--line); }
.month-row:hover td { background: var(--g-soft2); } .month-row .fold { color: var(--muted); display: inline-block; width: 12px; }
/* Budget */
.month-nav { display: inline-flex; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 4px 6px; }
.bb { padding: 9px 0; border-bottom: 1px solid var(--line2); } .bb:last-child { border: 0; }
.bb-ic { font-size: 17px; width: 26px; text-align: center; flex: none; }
.bb-bar { position: relative; height: 12px; background: #f0f3f1; border-radius: 6px; margin: 6px 0 3px; overflow: visible; }
.bb-bar i { position: absolute; top: 0; left: 0; height: 100%; border-radius: 6px; } .bb-bar i.proj { opacity: .3; border-radius: 0 6px 6px 0; }
.bb-bar s { position: absolute; top: -3px; width: 2px; height: 18px; background: var(--ink); text-decoration: none; }
.cat-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.big-money { display: flex; align-items: center; gap: 6px; font-size: 40px; font-weight: 800; margin-top: 10px; }
.big-money input { font-size: 40px; font-weight: 800; width: 260px; border: 0; border-bottom: 3px solid var(--g); border-radius: 0; padding: 0 4px; outline: none; background: transparent; }
.preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.preset { text-align: left; border: 2px solid var(--line); background: #fff; border-radius: 12px; padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; font: inherit; }
.preset.on, .preset:hover { border-color: var(--g); background: var(--g-soft2); }
.split-row { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line2); }
.split-amt { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; width: 110px; } .split-amt input { width: 84px; padding: 5px 6px; }
.wiz-steps { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .wiz-steps .sep { flex: 0 0 22px; height: 2px; background: var(--line); }
.ws { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; color: var(--muted); font-size: 13px; background: none; border: 0; cursor: default; padding: 4px 2px; font-family: inherit; }
button.ws { cursor: pointer; } button.ws:disabled { opacity: .5; cursor: not-allowed; }
.ws i { width: 24px; height: 24px; border-radius: 50%; background: var(--line2); display: grid; place-items: center; font-style: normal; font-size: 12px; }
.ws.on { color: var(--ink); } .ws.on i { background: var(--dark); color: #fff; } .ws.done i { background: var(--g); color: #fff; }
.wiz-steps.sm .ws { border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; } .wiz-steps.sm .ws.on { background: var(--dark); color: #fff; border-color: var(--dark); }
.cat-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; } .cat-pick .big-choice { text-align: center; padding: 10px; font: inherit; background: #fff; }
/* Outreach */
.terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.term-row { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; cursor: pointer; }
.roadmap { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.rm-step { display: flex; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: #fff; }
.rm-step.done { background: #f3faf6; border-color: #d3ebde; } .rm-step.next { border: 2px solid var(--g); } .rm-step.problem { border-color: var(--red); background: #fff6f6; }
.rm-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--line2); display: grid; place-items: center; font-weight: 800; font-size: 13px; flex: none; }
.rm-step.done .rm-dot { background: var(--g); color: #fff; } .rm-step.next .rm-dot { background: var(--dark); color: #fff; }
.deal-row { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line2); } .deal-row:last-child { border: 0; } .deal-row .pbar { max-width: 220px; }
/* Planner extras */
.area-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.area { text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 10px 12px; cursor: pointer; font: inherit; } .area.on, .area:hover { border-color: var(--g); background: var(--g-soft2); }
.meta-fix { flex-basis: 100%; background: #f7f9f8; border: 1px dashed var(--line); border-radius: 10px; padding: 8px 10px; }
.strike { text-decoration: line-through; color: var(--muted); }
.ai-opt { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
@media (max-width: 700px) { .terms { grid-template-columns: 1fr; } .big-money input { width: 180px; } }
.center .legend { text-align: left; }
/* Home */
.home-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .home-head h1 { margin: 0; font-size: 26px; letter-spacing: -.02em; } .home-head p { margin: 2px 0 0; } .home-head > div { flex: 1; }
.home-grid { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 14px; align-items: start; }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.hcard { display: flex; flex-direction: column; gap: 8px; color: var(--ink); text-decoration: none !important; border-top: 3px solid var(--st); transition: transform .1s, box-shadow .1s; }
.hcard:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(16,24,20,.08); }
.h-ic { font-size: 18px; } .h-val { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; } .h-txt { color: var(--ink2); min-height: 34px; }
.hcard .lnk { color: var(--g); font-weight: 600; margin-top: auto; } .st-pill { font-size: 11px; font-weight: 700; white-space: nowrap; }
.mini-gauge { width: 90px; height: 8px; background: #f0f3f1; border-radius: 6px; overflow: hidden; margin-bottom: 6px; } .mini-gauge i { display: block; height: 100%; }
.todo-card .ring { width: 64px; height: 64px; } .todo-card .ring svg { width: 64px; height: 64px; } .todo-card .ring .t b { font-size: 14px; } .todo-card .ring .t span { font-size: 8px; }
.todo-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.todo { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; }
.todo:hover { background: var(--g-soft2); border-color: #d8eee2; } .todo input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--g); } .todo.done b { text-decoration: line-through; color: var(--muted); }
.setup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.setup-item { display: flex; gap: 10px; align-items: center; border: 1px dashed var(--line); border-radius: 12px; padding: 10px 12px; color: var(--ink); text-decoration: none !important; } .setup-item:hover { border-color: var(--g); background: var(--g-soft2); }
@media (max-width: 1000px) { .home-grid { grid-template-columns: 1fr; } }
/* Marketing */
.heat-grid { display: grid; grid-template-columns: 32px repeat(24, 1fr); gap: 2px; font-size: 9px; color: var(--muted); }
.heat-grid i { display: block; height: 16px; border-radius: 3px; } .heat-grid .hh { text-align: left; white-space: nowrap; overflow: visible; } .heat-grid .hd { line-height: 16px; }
.send-rec { background: var(--g-soft2); border: 1px solid #d3ebde; border-radius: 12px; padding: 14px; } .send-rec .big { font-size: 24px; font-weight: 800; color: var(--g); margin-bottom: 4px; }
.fu { padding: 9px 0; border-bottom: 1px solid var(--line2); } .fu:last-child { border: 0; }
.auto-row { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line2); } .auto-row.miss { opacity: .9; }
.lift { font-weight: 800; font-size: 12px; min-width: 64px; } .lift.up { color: var(--g); } .lift.down { color: var(--red); }
.tip { border-radius: 10px; padding: 9px 12px; margin-bottom: 8px; font-size: 13px; border: 1px solid var(--line); } .tip-bad { background: #fff1f1; border-color: #f5cccc; } .tip-warn { background: #fff8ea; border-color: #f3dfb3; } .tip-good { background: #effaf4; border-color: #cfeadb; } .tip-info { background: #f3f8ff; border-color: #d6e4fb; }
.lt { padding: 1px 6px; border-radius: 6px; font-weight: 700; } .lt-good { background: var(--g-soft); color: var(--g); } .lt-ok { background: var(--amber-soft); color: var(--amber); } .lt-bad { background: var(--red-soft); color: var(--red); } .lt-gray { color: var(--muted); }

/* Team */
.me-chip { display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; padding: 3px 10px 3px 4px; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.me-chip .av, .member .av { width: 28px; height: 28px; border-radius: 50%; background: var(--dark); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.member .av.big { width: 40px; height: 40px; font-size: 18px; background: var(--line2); color: var(--ink); }
.me-txt { display: flex; flex-direction: column; line-height: 1.1; } .me-txt small { font-size: 11px; color: var(--muted); }
@media (max-width: 900px) { .me-txt { display: none; } }
.member { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line2); } .member:first-of-type { border-top: 0; }
.member.off { opacity: .55; } .member .tiny { margin-top: 3px; } .member .chip { padding: 1px 8px; font-size: 11px; }
.member .col-actions { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.btn.danger { color: var(--red); }
.invite-box { margin-top: 6px; background: #f3f8ff; border: 1px solid #d6e4fb; border-radius: 8px; padding: 8px; } .invite-box .row { gap: 6px; margin-top: 4px; } .invite-box input { flex: 1; font-size: 12px; }
.role-matrix th { font-size: 11px; font-weight: 600; text-align: center; } .role-matrix th:first-child { text-align: left; } .role-matrix td { vertical-align: top; }
.role-matrix .yes { color: var(--g); font-weight: 800; } .role-matrix .no { color: var(--muted); }
.role-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .role-opt { display: flex; gap: 8px; align-items: flex-start; border: 1px solid var(--line); border-radius: 10px; padding: 8px; cursor: pointer; }
.role-opt:has(input:checked) { border-color: var(--g); background: #effaf4; }
@media (max-width: 700px) { .role-pick { grid-template-columns: 1fr; } }
.chk-list { display: flex; flex-direction: column; gap: 4px; font-size: 13px; } .chk-list label { display: flex; gap: 6px; align-items: baseline; }
.ro-bar { background: #fff8ea; border: 1px solid #f3dfb3; border-radius: 10px; padding: 8px 12px; font-size: 13px; margin-bottom: 12px; }
.log-row { padding: 4px 0; border-top: 1px solid var(--line2); }
#login #email { margin-bottom: 0; }
body.no-scan #hmScan { display: none; }
body.ro .todo input, body.ro [data-tdone] { pointer-events: none; opacity: .4; }
.card.flash { box-shadow: 0 0 0 3px #5cc08b; }
/* Fix guides */
.fixg .fix-box { background: #f6f8f7; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 13px; } .fixg .fix-box p { margin: 4px 0 0; color: #33403a; line-height: 1.5; }
.fixg .fix-box.ok { background: #effaf4; border-color: #cfeadb; }
.fix-steps { padding-left: 22px; margin: 10px 0; font-size: 14px; line-height: 1.55; } .fix-steps li { margin-bottom: 8px; padding-left: 4px; }
.fixg textarea { width: 100%; }
/* Alerts */
.prov-pick { display: flex; gap: 6px; flex-wrap: wrap; }
.al-type { display: flex; gap: 8px; align-items: flex-start; padding: 7px 0; border-top: 1px solid var(--line2); cursor: pointer; }
.al-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line2); } .al-row.new b { color: var(--ink); } .al-row:not(.new) { opacity: .75; }
.up-bars { display: flex; gap: 3px; height: 34px; align-items: stretch; } .up-bars i { flex: 1; border-radius: 3px; min-width: 4px; }