:root{
  --bg: #f4f1ec;
  --panel: #ffffff;
  --panel-glass: rgba(255,255,255,.62);
  --card-border: #ffffff;

  /* Floating panels (UIkit dropdowns/modals, select2 & flatpickr
     popovers) need a properly frosted look — more opaque than
     --panel-glass, since they float freely above everything rather
     than sitting flush on a card. */
  --popover-bg: rgba(255,255,255,.94);

  /* Accent color (--accent, --accent-hover, --accent-soft, --accent-rgb)
     now lives in assets/themes/*.css — swap the <link id="theme-css">
     href in index.html to re-theme the whole app. Fallback values below
     only apply if no theme file is loaded. */
  --accent: #00B7FF;
  --accent-hover: #0092CC;
  --accent-soft: #E3F7FF;
  --accent-rgb: 0,183,255;

  --yellow-soft: #fdf3d9;
  --green-soft: #e7f6ea;
  --teal-soft: #e3f4f4;
  --text-dark: #2e2e2e;
  --text-muted: #8a8a8f;
  --border: #ececec;
  --radius: 16px;
  --pill-bg: rgba(255,255,255,.68);
  --shell-1: rgba(255,255,255,.6);
  --shell-2: rgba(255,255,255,.55);
  --shell-mobile: rgba(255,255,255,.32);
  --card-mobile: rgba(255,255,255,.88);
  --transition-theme: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* ===== Dark theme — same primary accent, dark grey surfaces ===== */
body.theme-dark{
  --bg:#1b1c1f;
  --panel: #26272b;
  --panel-glass: rgba(255,255,255,.06);
  --card-border: rgba(255,255,255,.12);
  --popover-bg: rgba(38,39,43,.9);
  --text-dark:#ece9e4;
  --text-muted:#9a9a9e;
  --border: rgba(255,255,255,.08);
  --pill-bg: rgba(255,255,255,.08);
  --shell-1: rgba(255,255,255,.05);
  --shell-2: rgba(255,255,255,.04);
  --shell-mobile: rgba(255,255,255,.05);
  --card-mobile: rgba(255,255,255,.08);
}

*{box-sizing:border-box;}
h1,h2,h3,h4,h5,h6,strong,b{font-weight:400;color:inherit;}
a{color:inherit;text-decoration:none;}
a:hover,a:focus{text-decoration:none;}
html{background:var(--bg);}
h2,h4,h6,.stat-value,.qa-item strong,.section-label,.subnav-title{letter-spacing:-0.01em;}
.page-head h2{letter-spacing:-0.02em;}
body{
  margin:0;
  font-family:'Plus Jakarta Sans',sans-serif;
  color:var(--text-dark);
  -webkit-font-smoothing:antialiased;
  transition:var(--transition-theme);

  /* Demo background image — swap assets/bg-demo.webp for your own — webp keeps file size small.
     Keep it light/low-contrast so translucent panels stay readable. */
  background-color:var(--bg);
  background-image:
    radial-gradient(ellipse 900px 600px at 8% 0%,   rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
    radial-gradient(ellipse 700px 500px at 100% 20%, rgba(var(--accent-rgb),.05), rgba(var(--accent-rgb),0) 60%),
    url('bg-demo.webp');
  background-attachment:fixed;
  background-size:cover;
  background-position:center;
  min-height:100vh;
}
/* Dark theme: drop the light demo image, use a plain dark grey
   surface with a faint orange glow instead */
body.theme-dark{
  background-image:
    radial-gradient(ellipse 900px 600px at 8% 0%,   rgba(255,255,255,.03), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 15%, rgba(var(--accent-rgb),.10), transparent 60%);
}
body.theme-dark::before{display:none;}
/* subtle diagonal wave overlay */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(115deg, transparent 40%, rgba(255,255,255,.55) 48%, transparent 58%),
    linear-gradient(115deg, transparent 60%, rgba(var(--accent-rgb),.04) 68%, transparent 80%);
}

.app-shell{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  height:100vh;
  padding:14px 20px 12px 16px;
  overflow:hidden;
}

/* Full-width navbar — logo sits at the extreme left, aligned with
   the sidebar card's left edge below it */
.topbar{
  flex-shrink:0;
  height:48px;
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;
}
.topbar-left{display:flex;align-items:center;gap:12px;}
.brand-logo{
  display:flex;align-items:center;
  height:38px;
  flex-shrink:0;
  color:var(--accent);
}
.brand-logo svg{height:100%;width:auto;display:block;}
.topbar-right{display:flex;align-items:center;gap:10px;}
.icon-btn{
  width:38px;height:38px;border-radius:50%;
  border:2px solid var(--card-border);background:var(--pill-bg);
  display:flex;align-items:center;justify-content:center;
  position:relative;color:#555;
  box-shadow:0 4px 12px rgba(0,0,0,.04);
}
.icon-btn.has-dot .dot{
  position:absolute;top:-4px;right:-4px;
  background:#d1495b;color:#fff;
  font-size:10px;font-weight:400;
  width:16px;height:16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.user-chip{display:flex;align-items:center;gap:10px;margin-left:6px;font-weight:400;font-size:14px;}
.avatar{
  width:36px;height:36px;border-radius:50%;
  overflow:hidden;
  box-shadow:0 4px 10px rgba(0,0,0,.08);
  border:2px solid #fff;
  flex-shrink:0;
}
.avatar img{width:100%;height:100%;object-fit:cover;display:block;}

/* Mobile-only topbar elements — hidden on desktop */
.hamburger-btn,.mobile-avatar{display:none;}
.hamburger-btn{color:var(--accent);}
.mobile-avatar{
  width:34px;height:34px;border-radius:50%;overflow:hidden;
  border:2px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.08);
}
.mobile-avatar img{width:100%;height:100%;object-fit:cover;display:block;}

/* Sidebar + main card row — fills whatever height remains between
   the navbar and the footer, both cards top/bottom aligned */
.body-row{
  flex:1 1 auto;
  min-height:0;
  display:grid;
  grid-template-columns:220px 1fr;
  gap:18px;
}

/* Shared full-width footer below both cards */
.app-footer{
  position:relative;
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  padding:10px 0 0;
  font-size:12.5px;
  color:var(--text-muted);
}
.app-footer-links{display:flex;align-items:center;gap:22px;}
.app-footer a{color:var(--text-muted);}
.app-footer a:hover{color:var(--accent);}
.footer-brand{
  position:absolute;right:6px;top:50%;
  transform:translateY(-40%);
  height:22px;width:auto;
}

/* ===== Sub nav (page list) — floating white card ===== */
.subnav{
  background:var(--accent);
  border:2px solid var(--accent);
  border-radius:26px;
  box-shadow:0 10px 30px rgba(0,0,0,.05);
  padding:26px 18px;
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
}
.subnav-title{
  color:#fff;
  font-weight:400;
  margin-bottom:16px;
  flex-shrink:0;
}
.subnav-scroll{
  flex:1 1 auto;min-height:0;overflow-y:auto;
  display:flex;flex-direction:column;
  padding-right:6px;
}
.subnav-list{
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;
}
.subnav-list li{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:10px;
  font-size:14.5px;color:rgba(255,255,255,.75);cursor:pointer;
}
.subnav-list li i{width:16px;color:rgba(255,255,255,.75);font-size:14px;}
.subnav-list li.active{background:rgba(255,255,255,.18);color:#fff;font-weight:400;box-shadow:none;}
.subnav-list li.active i{color:#fff;}
.subnav-list li:hover:not(.active){background:rgba(255,255,255,.1);}

/* Custom scrollbar for the nav scroll area (desktop sidebar + mobile drawer) */
.subnav-scroll{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.35) transparent;}
.subnav-scroll::-webkit-scrollbar{width:5px;}
.subnav-scroll::-webkit-scrollbar-track{background:transparent;}
.subnav-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.35);border-radius:999px;}
.subnav-scroll::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.5);}
.subnav-scroll::-webkit-scrollbar-button{display:none;width:0;height:0;}

.subnav-promo{
  margin-top:auto;
  padding-top:22px;
  flex-shrink:0;
}
.promo-icon{
  width:52px;height:52px;border-radius:50%;
  background:var(--accent-soft);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 14px;
  box-shadow:0 6px 16px rgba(0,0,0,.1);
  color:var(--accent);
  font-size:22px;
}
.promo-icon svg{width:24px;height:24px;display:block;}
/* UIkit's off-canvas component styles its own links white by
   default; force our accent color to win inside the drawer too */
.mobile-nav-inner .promo-icon{color:var(--accent) !important;}

/* Static "unbxd" brand credit — the one constant across every
   project built on this template. Sits centered at the bottom,
   subdued (white at 40% opacity) so it doesn't compete with the
   sidebar's real content. */
.brand-credit{
  display:flex;align-items:center;justify-content:center;
}
.brand-credit img{
  height:20px;width:auto;display:block;
  filter:brightness(0) invert(1);
  opacity:.4;
}

/* Everything below the topbar lives inside one floating panel.
   The panel now fills the body-row height exactly (top/bottom
   aligned with the sidebar), with an inner scrollable area for
   the dashboard sections. The footer lives outside, in .app-footer. */
.content{
  display:flex;
  flex-direction:column;
  min-height:0;
  background:var(--shell-2);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:2px solid var(--card-border);
  border-radius:28px;
  box-shadow:0 12px 34px rgba(0,0,0,.06);
  overflow:hidden;
}
.content-scroll{
  flex:1 1 auto;min-height:0;overflow-y:auto;
  display:grid;
  grid-template-columns:2fr 1fr;
  grid-template-areas:
    "head   head"
    "config quick"
    "stats  quick"
    "products activity";
  gap:22px 26px;
  padding:26px 28px 24px;
}

/* Custom scrollbar for the content area too */
.content-scroll{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.16) transparent;}
.content-scroll::-webkit-scrollbar{width:5px;}
.content-scroll::-webkit-scrollbar-track{background:transparent;}
.content-scroll::-webkit-scrollbar-thumb{background:rgba(0,0,0,.16);border-radius:999px;}
.content-scroll::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.28);}
.content-scroll::-webkit-scrollbar-button{display:none;width:0;height:0;}

.page-head{grid-area:head;}
.gd-config{grid-area:config;}
.gd-quick{grid-area:quick;}
.gd-stats{grid-area:stats;}
.gd-products{grid-area:products;}
.gd-activity{grid-area:activity;}

.page-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  margin-bottom:22px;
}
.page-head h2{font-weight:400;margin:0 0 4px;}
body.theme-dark .page-head h2{color:var(--accent);}
.breadcrumb-line{color:var(--text-muted);font-size:13px;}
.page-head-actions{display:flex;align-items:center;gap:10px;}
.pill-btn{
  display:flex;align-items:center;gap:6px;
  background:var(--pill-bg);border:2px solid var(--card-border);
  color:var(--text-dark);
  border-radius:999px;padding:8px 16px;font-size:13.5px;font-weight:400;
}

.section-label{color:var(--text-muted);font-weight:400;font-size:13px;text-transform:none;margin-bottom:10px;}

.card,.subnav,.content,.icon-btn,.qa-item,.team-pill{transition:var(--transition-theme),box-shadow .2s ease;}
.card{
  background:var(--panel-glass);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:2px solid var(--card-border);
  border-radius:var(--radius);
  padding:22px;
}

/* Configuration card */
.config-card{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.config-text h4{font-weight:400;margin-bottom:10px;color:var(--text-dark);}
.config-text p{color:var(--text-muted);font-size:14px;max-width:420px;margin-bottom:20px;}
.config-actions{display:flex;gap:10px;}
.btn-primary-pill{
  background:var(--accent);color:#fff;border:none;
  border-radius:999px;padding:10px 20px;font-weight:400;font-size:14px;
  display:flex;align-items:center;gap:6px;
}
.btn-ghost-pill{
  background:var(--accent-soft);color:var(--accent);border:none;
  border-radius:999px;padding:10px 20px;font-weight:400;font-size:14px;
  display:flex;align-items:center;gap:6px;
}
.config-art{
  font-size:110px;color:var(--accent);opacity:.85;flex-shrink:0;
}

/* Stats */
.stat-card{padding:18px;}
.stat-top{color:var(--text-muted);font-size:13px;margin-bottom:6px;}
.stat-value{font-weight:400;font-size:21px;margin-bottom:10px;color:var(--text-dark);}
.stat-up{color:#39b26a;font-size:12px;font-weight:400;margin-left:4px;}
.sparkline{height:40px;}

/* Table */
.table-card{padding:10px 22px;}
.product-table{margin:0;width:100%;}
.product-table,.product-table th,.product-table td{
  background-color:transparent !important;
  color:var(--text-dark);
  border-color:var(--border) !important;
}
.product-table thead th{color:var(--text-muted);font-weight:400;font-size:12.5px;}

/* Quick actions */
.quick-actions{display:flex;flex-direction:column;gap:10px;}
.qa-item{
  display:flex;align-items:center;gap:14px;
  background:var(--panel-glass);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:2px solid var(--card-border);
  border-radius:14px;padding:14px 16px;
  text-decoration:none;color:var(--text-dark);
  position:relative;
}
.qa-icon{
  width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;
}
/* qa-orange = the accent-colored quick-action chip (class name
   is legacy; it now follows --accent, not a fixed orange) */
.qa-orange{background:var(--accent-soft);color:var(--accent);}
.qa-yellow{background:var(--yellow-soft);color:#d9a520;}
.qa-green{background:var(--green-soft);color:#39b26a;}
.qa-teal{background:var(--teal-soft);color:#2ba3a3;}
.qa-item strong{display:block;font-size:14.5px;color:var(--text-dark);}
.qa-item small{color:var(--text-muted);font-size:12.5px;}
.qa-new{
  position:absolute;right:14px;top:14px;
  background:var(--teal-soft);color:#2ba3a3;
  font-size:11px;font-weight:400;
  padding:2px 8px;border-radius:999px;
}

.view-all{color:var(--text-muted);font-size:13px;}
.view-all:hover{color:var(--accent);}

.activity-card{padding:18px;}
.activity-item{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);}
.activity-item:last-child{border-bottom:none;}
.activity-dot{
  width:10px;height:10px;border-radius:50%;margin-top:5px;flex-shrink:0;
}
.activity-item strong{display:block;font-size:14px;color:var(--text-dark);}
.activity-item p{margin:2px 0 0;font-size:12.5px;color:var(--text-muted);}
.activity-item span.time{font-size:11px;color:#b8b8b8;}

/* Responsive */
@media (max-width: 991px){
  .body-row{grid-template-columns:1fr;}
  .subnav{display:none;}
  .hamburger-btn{display:flex;}
}

@media (max-width: 700px){
  .app-shell{
    padding:14px 14px 10px;
  }
  .body-row{gap:14px;}
  .topbar{margin-bottom:14px;}
  .mobile-avatar{display:flex;}
  .user-chip{display:none;}

  /* content still fills the remaining viewport height and scrolls
     internally (navbar + footer stay sticky), just with a lighter
     wash than desktop and sections stacked instead of grid areas */
  .content{
    background:var(--shell-mobile);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-radius:24px;
  }
  .content-scroll{
    display:flex;
    flex-direction:column;
    grid-template-columns:none;
    padding:20px 16px 20px;
    gap:26px;
  }
  .page-head{padding:0 6px;}
  .section-label{padding:0 6px;}
  .gd-activity > .d-flex{padding:0 6px;}
  .page-head,.gd-config,.gd-quick,.gd-stats,.gd-products,.gd-activity{
    grid-area:auto;
  }
  /* reorder to match: config, quick actions, stats, products, activity */
  .page-head{order:1;}
  .gd-config{order:2;}
  .gd-quick{order:3;}
  .gd-stats{order:4;}
  .gd-products{order:5;}
  .gd-activity{order:6;}

  .config-card{flex-direction:column;text-align:left;padding:24px 20px;}
  .card{background:var(--card-mobile);}
  .config-art{font-size:80px;align-self:center;}
  #stats-row .col-6{padding-bottom:2px;}
}

/* ===== Mobile off-canvas nav (UIkit component, themed) ===== */
.mobile-nav-bar{
  background:transparent !important;
  padding:0 !important;
  display:flex;
  align-items:stretch;
  height:100vh;
}
.mobile-nav-inner{
  margin:14px;
  flex:1 1 auto;
  min-width:0;
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--accent);
  border:2px solid var(--accent);
  border-radius:26px;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  padding:26px 20px;
  overflow:hidden;
}
.mobile-nav-inner .uk-offcanvas-close{top:16px;right:16px;}
.mobile-nav-brand{
  display:flex;align-items:center;
  height:40px;
  flex-shrink:0;
  margin-bottom:24px;
  color:#fff;
}
.mobile-nav-brand svg{height:100%;width:auto;display:block;}

/* Drawer logo: white by default since the drawer's background is
   solid accent by default; colored again only if sidebar-glass is
   active (then it needs to stand out against the light glass card
   instead) — dark theme always wins regardless of that toggle. */
body.sidebar-glass .mobile-nav-brand{color:var(--accent);}
body.theme-dark .brand-logo{color:#fff;}
body.theme-dark .mobile-nav-brand{color:#fff;}

/* ===== UIkit component theming (keep UIkit's JS behavior,
   restyle its look to match our palette instead of its default blue) ===== */
.uk-notification-message{
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);
  border-radius:14px;
  border:1px solid var(--border);
  box-shadow:0 12px 30px rgba(0,0,0,.1);
  color:var(--text-dark);
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:13.5px;
}
.uk-notification-message-primary{border-left:3px solid var(--accent);}
.uk-tooltip{
  background:#2b2b2b;
  color:#fff;
  border-radius:8px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:12px;
  padding:5px 10px;
}

/* ===== Dropdown / modal wrapper for topbar toggles ===== */
.topbar-dropdown{position:relative;display:flex;align-items:center;}

/* Shared glass look for every UIkit dropdown + modal */
.uk-dropdown{
  background:var(--popover-bg);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:2px solid var(--card-border);
  border-radius:18px;
  padding:10px;
  box-shadow:0 16px 40px rgba(0,0,0,.12);
  min-width:230px;
  color:var(--text-dark);
}
.uk-modal-dialog{
  background:var(--popover-bg);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  border:2px solid var(--card-border);
  border-radius:24px;
  padding:26px;
  box-shadow:0 20px 50px rgba(0,0,0,.18);
  color:var(--text-dark);
}
.uk-modal-close-default{
  color:var(--text-muted);
  top:16px;right:16px;
}

/* Generic dropdown menu items (notifications + user menu) */
.dropdown-head{
  font-size:13px;font-weight:400;color:var(--text-muted);
  padding:8px 10px 6px;
}
.dropdown-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:10px;
  font-size:13.5px;color:var(--text-dark);
  text-decoration:none;
}
.dropdown-item:hover{background:rgba(255,255,255,.5);}
.dropdown-item i{width:16px;color:var(--text-muted);font-size:14px;}
.dropdown-item.danger{color:#d1495b;}
.dropdown-item.danger i{color:#d1495b;}
.dropdown-divider{height:1px;background:var(--border);margin:6px 4px;}
.dropdown-footer{
  display:block;text-align:center;
  font-size:12.5px;color:var(--accent);
  padding:8px 10px 4px;
}
.dropdown-footer:hover{color:var(--accent-hover);}

/* Notification dropdown items */
.notif-item{
  display:flex;gap:10px;padding:9px 10px;border-radius:10px;
}
.notif-item:hover{background:rgba(255,255,255,.5);}
.notif-item .activity-dot{margin-top:5px;}
.notif-item strong{display:block;font-size:13.5px;color:var(--text-dark);}
.notif-item p{margin:2px 0 0;font-size:12px;color:var(--text-muted);}
.notif-item span.time{font-size:10.5px;color:#b8b8b8;}

/* Search modal */
.modal-search-head{
  display:flex;align-items:center;gap:12px;
  border-bottom:1px solid var(--border);
  padding-bottom:14px;margin-bottom:10px;
}
.modal-search-head i{color:var(--text-muted);font-size:18px;}
.search-input{
  flex:1;border:none;background:transparent;
  font-size:16px;font-family:inherit;color:var(--text-dark);
  outline:none;
}
.modal-search-hint{color:var(--text-muted);}

/* ===== Sidebar-glass opt-out — restores the translucent glass
   sidebar look. Add class="sidebar-glass" to <body> to use it. ===== */
body.sidebar-glass .subnav,
body.sidebar-glass .mobile-nav-inner{
  background:var(--shell-1);
  border-color:var(--card-border);
}
body.sidebar-glass .subnav-title{color:var(--accent);}
body.sidebar-glass .subnav-list li,
body.sidebar-glass .subnav-list li i{color:var(--text-muted);}
body.sidebar-glass .subnav-list li.active{background:var(--panel);color:var(--accent);box-shadow:0 6px 16px rgba(0,0,0,.06);}
body.sidebar-glass .subnav-list li.active i{color:var(--accent);}
body.sidebar-glass .subnav-list li:hover:not(.active){background:rgba(255,255,255,.5);}
body.sidebar-glass .subnav-scroll{scrollbar-color:rgba(0,0,0,.16) transparent;}
body.sidebar-glass .subnav-scroll::-webkit-scrollbar-thumb{background:rgba(0,0,0,.16);}

/* ===== Dark theme fine-tuning for hardcoded light-mode values =====
   Note: the sidebar/drawer now stay solid accent-color in dark
   theme too (same as light theme) — only the sidebar-glass opt-out
   class reverts to the translucent look, and it already picks up
   the right dark-vs-light tint automatically via --shell-1 and
   --card-border, which are redefined for body.theme-dark above. */
body.theme-dark .dropdown-item:hover{background:rgba(255,255,255,.08);}
body.theme-dark .notif-item:hover{background:rgba(255,255,255,.08);}
body.theme-dark .icon-btn{color:var(--text-dark);}
body.theme-dark .page-head h2{color:var(--accent);}
body.theme-dark .uk-notification-message{background:rgba(38,39,43,.9);border-color:var(--border);color:var(--text-dark);}
body.theme-dark .text-muted{color:var(--text-muted) !important;}
body.theme-dark .pill-btn{background:var(--pill-bg);border-color:var(--border);color:var(--text-dark);}
body.theme-dark .app-footer{color:var(--text-muted);}
body.theme-dark .breadcrumb-line{color:var(--text-muted);}