/* DrMova — selectable styles ("skins"). The default glass look lives in app.css; these flat styles replace its
   variables and soften the neumorphic parts. html[data-skin] picks the style, html.flat marks every non-glass one. */

/* ================================================================ shared: flat styles */
:root.flat {
  --blur: none;
  --raised: none; --raised-sm: none; --inset: none;
  --glass: var(--card); --glass-strong: var(--card); --glass-solid: var(--card);
  --glass-border: var(--sep); --glass-edge: var(--sep);
  --rk: 1;
}
:root.flat .ambient { display: none; }
:root.flat body { background: var(--content); }
:root.flat .glass, :root.flat .glass-strong { background: var(--card); backdrop-filter: none; -webkit-backdrop-filter: none; border-color: var(--sep); }

/* layout: a full-height sidebar flush with the window */
:root.flat .sidebar { margin: 0; border-radius: 0; box-shadow: none; background: var(--side); border: 0; border-inline-end: 1px solid var(--sep); backdrop-filter: none; -webkit-backdrop-filter: none; }
:root.flat .main { background: var(--content); }
:root.flat .sb-search { background: var(--field); box-shadow: none; border-radius: var(--r-sm); }
:root.flat .nav-item { border-radius: var(--r-sm); }
:root.flat .nav-item:hover { background: var(--hover); }
:root.flat .nav-item.active { background: var(--sel); color: var(--sel-ink); box-shadow: none; }
:root.flat .sb-foot { border-top-color: var(--sep); }

/* headings */
:root.flat .vh-icon { box-shadow: none; background: transparent; width: 38px; height: 38px; }
:root.flat .vh-icon svg { width: 28px; height: 28px; }
:root.flat .section-title, :root.flat .heading-row { border-bottom-color: var(--sep); }

/* controls */
:root.flat .btn { background: var(--btn); box-shadow: none; border: 1px solid var(--btn-border); border-radius: var(--r-sm); }
:root.flat .btn:hover { background: var(--hover); }
:root.flat .btn:active, :root.flat .btn.pressed { box-shadow: none; transform: none; filter: brightness(.96); }
:root.flat .btn.primary { background: var(--accent); border-color: transparent; box-shadow: none; }
:root.flat .btn.primary:hover { filter: brightness(1.06); background: var(--accent); }
:root.flat .btn.danger.solid { box-shadow: none; border-color: transparent; }
:root.flat .btn.ghost { background: transparent; border-color: transparent; }
:root.flat .btn.ghost:hover { background: var(--hover); }
:root.flat .icon-btn { border-radius: var(--r-sm); }
:root.flat .icon-btn:hover { background: var(--hover); }
:root.flat .icon-btn.raised { background: var(--field); box-shadow: none; }
:root.flat .icon-btn.raised:active, :root.flat .icon-btn.on { box-shadow: none; background: var(--sel); }
:root.flat .input, :root.flat .select, :root.flat textarea.input { background-color: var(--field); box-shadow: none; border: 1px solid var(--field-border); border-radius: var(--r-sm); }
:root.flat .input:focus, :root.flat .select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
:root.flat .seg { background: var(--field); box-shadow: none; border-radius: var(--r-sm); }
:root.flat .seg button { border-radius: calc(var(--r-sm) - 2px); }
:root.flat .seg button.on { background: var(--card); box-shadow: 0 1px 3px rgba(0, 0, 0, .14), 0 0 0 .5px rgba(0, 0, 0, .04); }
:root.flat .switch i { background: var(--field-strong); box-shadow: none; }
:root.flat .switch i::after { background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .22); }
:root.flat .chip { border-radius: calc(var(--r-sm) - 2px); }
:root.flat .avatar { box-shadow: 0 0 0 2px var(--content); }
:root.flat .panel { border: 1px solid var(--sep); border-radius: var(--r-lg); }
:root.flat .popover, :root.flat .modal, :root.flat .sheet { background: var(--card); border-color: var(--sep); }
:root.flat .menu-item:hover, :root.flat .menu-item.kb { background: var(--sel); }
:root.flat .scrim { background: rgba(0, 0, 0, .2); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* tasks */
:root.flat .task:hover { background: var(--hover); }
:root.flat .task.selected { background: var(--sel); box-shadow: none; }
:root.flat .check { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c); }
:root.flat .check:hover { --c: var(--accent); }
:root.flat .check.on { background: var(--accent); box-shadow: none; }
:root.flat .check.canceled { background: var(--ink-4); box-shadow: none; }
:root.flat .inline-new { background: var(--card); box-shadow: 0 0 0 1px var(--sep), 0 6px 18px -10px rgba(0, 0, 0, .25); }
:root.flat .empty .empty-ic { box-shadow: none; background: var(--field); }
:root.flat .td-props { box-shadow: none; background: var(--field); }
:root.flat .prop:hover { background: var(--hover); }
:root.flat .card { box-shadow: none; border: 1px solid var(--sep); background: var(--card); }
:root.flat .card:hover { border-color: var(--line-2); }
:root.flat .board-col { background: var(--field); border: 0; }
:root.flat .project-card { background: var(--card); border-color: var(--sep); }
:root.flat .project-card:hover { box-shadow: none; background: var(--hover); }
:root.flat .today-event { background: color-mix(in srgb, var(--c, var(--accent)) 9%, var(--card)); }
:root.flat .preset, :root.flat .look-preview { box-shadow: none; }

/* phone: a classic bottom bar across the screen and a round add button above it */
@media (max-width: 860px) {
  :root.flat .tabbar { left: 0; right: 0; bottom: 0; height: calc(58px + var(--safe-b)); padding: 0 4px var(--safe-b); border-radius: 0; box-shadow: none; border: 0; border-top: 1px solid var(--sep); background: var(--bar); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); }
  :root.flat .tabbar .spacer { display: none; }
  :root.flat .tabbar button.on { color: var(--accent); }
  :root.flat .fab { left: auto; inset-inline-end: 18px; transform: none; bottom: calc(72px + var(--safe-b)); width: 56px; height: 56px; border-radius: 50%; background: var(--accent); box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .35); }
  :root.flat .view { padding-bottom: calc(140px + var(--safe-b)); }
  :root.flat .toasts { bottom: calc(136px + var(--safe-b)); }
  :root.flat .app.show-home .sidebar { background: var(--content); }
  :root.flat .app.show-home .sb-scroll .sb-core { background: var(--card); border-color: var(--sep); backdrop-filter: none; -webkit-backdrop-filter: none; }
  :root.flat .modal { border-radius: var(--r-xl) var(--r-xl) 0 0; }
}

/* ================================================================ System (Apple Human Interface look) */
:root[data-skin="apple"] {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Vazirmatn, Roboto, system-ui, sans-serif;
  --bg: #FFFFFF; --content: #FFFFFF; --side: #F2F2F7; --card: #FFFFFF; --group: #F2F2F7;
  --field: rgba(118, 118, 128, .12); --field-border: transparent; --field-strong: rgba(120, 120, 128, .2);
  --sep: rgba(60, 60, 67, .16); --line: rgba(60, 60, 67, .11); --line-2: rgba(60, 60, 67, .2);
  --sel: rgba(120, 120, 128, .16); --sel-ink: #000; --hover: rgba(120, 120, 128, .08);
  --btn: rgba(120, 120, 128, .12); --btn-border: transparent; --bar: rgba(249, 249, 249, .9);
  --ink: #000000; --ink-2: rgba(60, 60, 67, .85); --ink-3: rgba(60, 60, 67, .58); --ink-4: rgba(60, 60, 67, .3);
  --pom: #FF3B30; --pom-soft: rgba(255, 59, 48, .12); --saffron: #FF9500; --saffron-ink: #C93400; --saffron-soft: rgba(255, 149, 0, .14); --indigo: #5856D6; --indigo-soft: rgba(88, 86, 214, .12);
  --r-xl: 14px; --r-lg: 12px; --r-md: 10px; --r-sm: 8px;
  --float: 0 12px 40px rgba(0, 0, 0, .18), 0 0 0 .5px rgba(0, 0, 0, .1);
}
:root[data-skin="apple"][data-theme="dark"] {
  --bg: #000000; --content: #000000; --side: #1C1C1E; --card: #1C1C1E; --group: #1C1C1E;
  --field: rgba(118, 118, 128, .24); --field-strong: rgba(120, 120, 128, .36);
  --sep: rgba(84, 84, 88, .6); --line: rgba(84, 84, 88, .42); --line-2: rgba(84, 84, 88, .7);
  --sel: rgba(120, 120, 128, .3); --sel-ink: #fff; --hover: rgba(120, 120, 128, .16);
  --btn: rgba(120, 120, 128, .24); --bar: rgba(22, 22, 24, .92);
  --ink: #FFFFFF; --ink-2: rgba(235, 235, 245, .78); --ink-3: rgba(235, 235, 245, .52); --ink-4: rgba(235, 235, 245, .26);
  --pom: #FF453A; --saffron: #FF9F0A; --saffron-ink: #FFB340; --indigo: #5E5CE6;
  --float: 0 12px 40px rgba(0, 0, 0, .6), 0 0 0 .5px rgba(255, 255, 255, .1);
}
:root[data-skin="apple"] .btn { color: var(--accent-ink); }
:root[data-skin="apple"] .btn.primary, :root[data-skin="apple"] .btn.danger.solid { color: var(--on-accent); }
:root[data-skin="apple"] .btn.danger { color: var(--pom); }
:root[data-skin="apple"] .btn, :root[data-skin="apple"] .btn.sm { border-radius: 9px; }
:root[data-skin="apple"] .btn.block { border-radius: 12px; }
:root[data-skin="apple"] .vh h1 { font-weight: 700; font-size: clamp(28px, 3.4vw, 34px); letter-spacing: .01em; }
:root[data-skin="apple"] .section-title { border-bottom: 0; font-size: 20px; font-weight: 700; margin-top: 26px; }
:root[data-skin="apple"] .heading-row { border-bottom: 0; }
:root[data-skin="apple"] .heading-row h3 { font-size: 19px; color: var(--accent); }
:root[data-skin="apple"] .task { border-radius: 10px; }
:root[data-skin="apple"] .task + .task::before { content: ""; position: absolute; top: 0; inset-inline: 43px 10px; height: .5px; background: var(--sep); }
:root[data-skin="apple"] .check { --c: rgba(60, 60, 67, .3); width: 22px; height: 22px; box-shadow: inset 0 0 0 1.5px var(--c); }
:root[data-skin="apple"][data-theme="dark"] .check { --c: rgba(235, 235, 245, .3); }
:root[data-skin="apple"] .switch { width: 51px; height: 31px; }
:root[data-skin="apple"] .switch i { border-radius: 16px; }
:root[data-skin="apple"] .switch i::after { width: 27px; height: 27px; top: 2px; inset-inline-start: 2px; }
:root[data-skin="apple"] .switch input:checked + i { background: #34C759; }
:root[data-skin="apple"] .switch input:checked + i::after { transform: translateX(20px); }
:root[dir="rtl"][data-skin="apple"] .switch input:checked + i::after { transform: translateX(-20px); }
:root[data-skin="apple"] .panel { background: var(--group); border: 0; }
:root[data-skin="apple"] .panel .input, :root[data-skin="apple"] .panel .select, :root[data-skin="apple"] .panel .seg { background-color: var(--card); }
:root[data-skin="apple"] .panel .seg button.on { background: var(--field-strong); box-shadow: none; }
:root[data-skin="apple"] .nav-item.active { font-weight: 600; }
:root[data-skin="apple"] .add-row { color: var(--accent); }
:root[data-skin="apple"] .add-row .plus { background: var(--accent); color: #fff; box-shadow: none; }

/* ================================================================ Minimal (calm, white, like Things) */
:root[data-skin="things"] {
  --bg: #FFFFFF; --content: #FFFFFF; --side: #F5F6F8; --card: #FFFFFF;
  --field: #F3F4F6; --field-border: #E4E6EA; --field-strong: #D9DCE1;
  --sep: #E7E9EC; --line: #ECEEF1; --line-2: #DADDE2;
  --sel: #DFE7F3; --sel-ink: #1A1D21; --hover: #F4F6F9;
  --btn: #FFFFFF; --btn-border: #DCDFE4; --bar: rgba(250, 250, 251, .94);
  --ink: #1A1D21; --ink-2: #565D69; --ink-3: #969CA6; --ink-4: #C5C9D0;
  --saffron: #F5B800; --saffron-ink: #B07F00; --pom: #EE4B4B; --indigo: #4E6CF2;
  --r-xl: 12px; --r-lg: 10px; --r-md: 8px; --r-sm: 6px;
  --float: 0 18px 48px -16px rgba(20, 24, 33, .28), 0 0 0 1px rgba(20, 24, 33, .06);
}
:root[data-skin="things"][data-theme="dark"] {
  --bg: #1E1F22; --content: #1E1F22; --side: #26272B; --card: #2A2B30;
  --field: #303137; --field-border: #3A3B42; --field-strong: #45474F;
  --sep: #33343A; --line: #2F3036; --line-2: #42444B;
  --sel: #33415A; --sel-ink: #EEF2F8; --hover: #2A2C31;
  --btn: #2C2D33; --btn-border: #3D3F46; --bar: rgba(34, 35, 38, .94);
  --ink: #ECEDEF; --ink-2: #ABB0B8; --ink-3: #757A83; --ink-4: #4D5058;
  --float: 0 18px 48px -14px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .06);
}
:root[data-skin="things"] .check { width: 18px; height: 18px; margin-top: 3px; border-radius: 5px; --c: #B4B9C1; }
:root[data-skin="things"][data-theme="dark"] .check { --c: #5C606A; }
:root[data-skin="things"] .check svg { width: 12px; height: 12px; }
:root[data-skin="things"] .cl-item .check { width: 16px; height: 16px; border-radius: 4px; }
:root[data-skin="things"] .task { padding-block: 7px; }
:root[data-skin="things"] .task:hover { background: transparent; }
:root[data-skin="things"] .task.selected { background: var(--sel); }
:root[data-skin="things"] .vh { margin-bottom: 26px; }
:root[data-skin="things"] .vh h1 { font-weight: 700; font-size: clamp(25px, 3vw, 30px); }
:root[data-skin="things"] .section-title { color: var(--accent-ink); font-size: 15px; }
:root[data-skin="things"] .section-title .big { color: var(--ink); }
:root[data-skin="things"] .heading-row h3 { font-size: 15px; }
:root[data-skin="things"] .nav-item { padding-block: 5px; font-size: 14px; }
:root[data-skin="things"] .nav-item.active { font-weight: 500; }
:root[data-skin="things"] .add-row .plus { box-shadow: none; }
:root[data-skin="things"] .add-row:hover { background: transparent; }
:root[data-skin="things"] .chip { font-weight: 500; }
:root[data-skin="things"] .chip.tag { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, #8892B0) 45%, transparent); }

/* ================================================================ Pro (dense and precise, dark sidebar — like OmniFocus) */
:root[data-skin="omni"] {
  --bg: #F7F5FA; --content: #FDFCFE; --side: #2B2735; --card: #FFFFFF;
  --field: #F2EFF7; --field-border: #E0DAEA; --field-strong: #D4CCE2;
  --sep: #E6E1EE; --line: #EEEAF3; --line-2: #DAD3E6;
  --sel: #ECE3FA; --sel-ink: #3B2270; --hover: #F7F3FC;
  --btn: #FFFFFF; --btn-border: #D9D2E5; --bar: rgba(251, 250, 253, .95);
  --ink: #221D2C; --ink-2: #5A536B; --ink-3: #8F88A0; --ink-4: #C4BED0;
  --saffron: #F29B30; --saffron-ink: #B56508; --pom: #E5484D; --indigo: #5F6BEA;
  --r-xl: 10px; --r-lg: 8px; --r-md: 7px; --r-sm: 6px;
  --float: 0 16px 44px -14px rgba(34, 22, 58, .34), 0 0 0 1px rgba(34, 22, 58, .07);
}
:root[data-skin="omni"][data-theme="dark"] {
  --bg: #17151C; --content: #1B1921; --side: #121016; --card: #23202B;
  --field: #2A2733; --field-border: #37333F; --field-strong: #433E4E;
  --sep: #322E3B; --line: #2C2934; --line-2: #3D3848;
  --sel: #3A2D57; --sel-ink: #E9DDFF; --hover: #24212C;
  --btn: #27242F; --btn-border: #3A3644; --bar: rgba(24, 22, 30, .95);
  --ink: #ECE8F4; --ink-2: #B3ACC4; --ink-3: #7F7891; --ink-4: #4F4A5C;
  --float: 0 16px 44px -12px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .06);
}
/* the sidebar is dark in both modes: its own ink */
:root[data-skin="omni"] .sidebar {
  --ink: #EEEAF5; --ink-2: #BDB5CE; --ink-3: #8F87A3; --ink-4: #5E576D;
  --line: rgba(255, 255, 255, .08); --sep: rgba(255, 255, 255, .08); --field: rgba(255, 255, 255, .08);
  --sel: rgba(167, 128, 240, .28); --sel-ink: #FFFFFF; --hover: rgba(255, 255, 255, .06);
  color: var(--ink);
}
:root[data-skin="omni"] .sidebar .nav-item { color: var(--ink); }
:root[data-skin="omni"] .task { padding-block: 5px; border-radius: 0; margin-inline: 0; padding-inline: 4px; border-bottom: 1px solid var(--line); }
:root[data-skin="omni"] .task .t-title { font-size: 14.5px; }
:root[data-skin="omni"] .check { width: 18px; height: 18px; margin-top: 2px; --c: #A79DBA; }
:root[data-skin="omni"] .check svg { width: 12px; height: 12px; }
:root[data-skin="omni"] .check.today-due, :root[data-skin="omni"] .check.p2 { background: color-mix(in srgb, var(--saffron) 18%, transparent); }
:root[data-skin="omni"] .check.p3 { background: color-mix(in srgb, var(--pom) 14%, transparent); }
:root[data-skin="omni"] .vh h1 { font-size: clamp(22px, 2.6vw, 26px); font-weight: 700; }
:root[data-skin="omni"] .vh-icon svg { width: 24px; height: 24px; }
:root[data-skin="omni"] .section-title { border: 0; background: var(--field); border-radius: var(--r-sm); padding: 5px 10px; font-size: 13.5px; color: var(--ink-2); margin-top: 22px; }
:root[data-skin="omni"] .section-title .big { font-size: 18px; }
:root[data-skin="omni"] .heading-row { background: var(--field); border: 0; border-radius: var(--r-sm); padding: 4px 10px; }
:root[data-skin="omni"] .heading-row h3 { font-size: 13.5px; color: var(--accent-ink); }
:root[data-skin="omni"] .add-row { margin: 0; border-radius: 0; width: 100%; padding-inline: 4px; }
:root[data-skin="omni"] .nav-item { padding-block: 5px; font-size: 14px; }
:root[data-skin="omni"] .chip { border-radius: 4px; }

/* ================================================================ Bold (clean lines with a red accent — like Todoist) */
:root[data-skin="todoist"] {
  --bg: #FFFFFF; --content: #FFFFFF; --side: #FCFAF8; --card: #FFFFFF;
  --field: #F5F5F5; --field-border: #E5E5E5; --field-strong: #D6D6D6;
  --sep: #EEEEEE; --line: #F0F0F0; --line-2: #E0E0E0;
  --sel: #FFEFE5; --sel-ink: #C3392D; --hover: #F8F5F2;
  --btn: #F5F5F5; --btn-border: transparent; --bar: rgba(255, 255, 255, .96);
  --ink: #202020; --ink-2: #555555; --ink-3: #808080; --ink-4: #BDBDBD;
  --saffron: #EB8909; --saffron-ink: #B06300; --pom: #D1453B; --indigo: #246FE0;
  --r-xl: 12px; --r-lg: 10px; --r-md: 8px; --r-sm: 5px;
  --float: 0 14px 40px -12px rgba(0, 0, 0, .3), 0 0 0 1px rgba(0, 0, 0, .06);
}
:root[data-skin="todoist"][data-theme="dark"] {
  --bg: #1E1E1E; --content: #1E1E1E; --side: #282828; --card: #262626;
  --field: #2E2E2E; --field-border: #3A3A3A; --field-strong: #474747;
  --sep: #333333; --line: #2E2E2E; --line-2: #3F3F3F;
  --sel: #3B2724; --sel-ink: #FF8E80; --hover: #2A2A2A;
  --btn: #2E2E2E; --bar: rgba(30, 30, 30, .96);
  --ink: #E8E8E8; --ink-2: #B3B3B3; --ink-3: #808080; --ink-4: #555555;
  --pom: #E35A4F;
  --float: 0 14px 40px -10px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .06);
}
:root[data-skin="todoist"] .task { border-radius: 0; margin-inline: 0; padding-inline: 2px; padding-block: 9px; border-bottom: 1px solid var(--line); }
:root[data-skin="todoist"] .task:hover { background: transparent; }
:root[data-skin="todoist"] .task.selected { background: var(--sel); }
:root[data-skin="todoist"] .check { width: 18px; height: 18px; margin-top: 3px; --c: #9E9E9E; }
:root[data-skin="todoist"] .check svg { width: 11px; height: 11px; color: var(--c); transform: scale(1); opacity: 0; transition: opacity .15s; }
:root[data-skin="todoist"] .check:hover svg { opacity: 1; }
:root[data-skin="todoist"] .check.on svg { opacity: 1; color: #fff; }
:root[data-skin="todoist"] .check.p3 { --c: #D1453B; background: rgba(209, 69, 59, .1); box-shadow: inset 0 0 0 2px var(--c); }
:root[data-skin="todoist"] .check.p2 { --c: #EB8909; background: rgba(235, 137, 9, .1); box-shadow: inset 0 0 0 2px var(--c); }
:root[data-skin="todoist"] .check.on { background: var(--ink-3); --c: var(--ink-3); }
:root[data-skin="todoist"] .vh h1 { font-size: clamp(21px, 2.4vw, 24px); font-weight: 700; }
:root[data-skin="todoist"] .vh-icon { width: 30px; height: 30px; }
:root[data-skin="todoist"] .vh-icon svg { width: 22px; height: 22px; }
:root[data-skin="todoist"] .section-title { font-size: 14px; font-weight: 700; margin-top: 26px; }
:root[data-skin="todoist"] .heading-row h3 { font-size: 14px; color: var(--ink); }
:root[data-skin="todoist"] .add-row { margin: 0; width: 100%; border-radius: 0; padding-inline: 2px; color: var(--ink-3); }
:root[data-skin="todoist"] .add-row .plus { box-shadow: none; color: var(--accent); }
:root[data-skin="todoist"] .add-row:hover { background: transparent; color: var(--accent); }
:root[data-skin="todoist"] .add-row:hover .plus { background: var(--accent); color: #fff; }
:root[data-skin="todoist"] .nav-item { padding-block: 6px; font-size: 14px; }
:root[data-skin="todoist"] .nav-item.active .ic { color: var(--sel-ink); }
:root[data-skin="todoist"] .btn { font-weight: 600; }

/* ================================================================ style picker (settings) */
.skins { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.skin-card { border: 2px solid transparent; border-radius: var(--r-md); padding: 0; background: none; text-align: start; overflow: hidden; display: grid; color: var(--ink); }
.skin-card.on { border-color: var(--accent); }
.skin-card .sk-pv { display: flex; height: 92px; border-radius: calc(var(--r-md) - 2px); overflow: hidden; box-shadow: 0 0 0 1px var(--line-2); }
.skin-card .sk-side { width: 32%; padding: 8px 6px; display: grid; gap: 5px; align-content: start; }
.skin-card .sk-side i { height: 5px; border-radius: 3px; opacity: .55; }
.skin-card .sk-side i.on { opacity: 1; }
.skin-card .sk-main { flex: 1; padding: 9px 8px; display: grid; gap: 7px; align-content: start; }
.skin-card .sk-main b { height: 7px; width: 55%; border-radius: 3px; }
.skin-card .sk-row { display: flex; align-items: center; gap: 5px; }
.skin-card .sk-row s { width: 9px; height: 9px; flex: none; border: 1.5px solid; }
.skin-card .sk-row u { height: 4px; flex: 1; border-radius: 2px; opacity: .45; }
.skin-card .sk-txt { padding: 8px 4px 2px; }
.skin-card .sk-txt b { display: block; font-size: 14px; }
.skin-card .sk-txt span { display: block; font-size: 12px; color: var(--ink-3); line-height: 1.6; }