/* layer: properties */
@property --un-inset-ring-color{syntax:"*";inherits:false;}
@property --un-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}
@property --un-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}
@property --un-inset-shadow-color{syntax:"*";inherits:false;}
@property --un-ring-color{syntax:"*";inherits:false;}
@property --un-ring-inset{syntax:"*";inherits:false;}
@property --un-ring-offset-color{syntax:"*";inherits:false;}
@property --un-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}
@property --un-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0px;}
@property --un-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}
@property --un-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}
@property --un-shadow-color{syntax:"*";inherits:false;}
@property --un-blur{syntax:"*";inherits:false;}
@property --un-brightness{syntax:"*";inherits:false;}
@property --un-contrast{syntax:"*";inherits:false;}
@property --un-drop-shadow{syntax:"*";inherits:false;}
@property --un-grayscale{syntax:"*";inherits:false;}
@property --un-hue-rotate{syntax:"*";inherits:false;}
@property --un-invert{syntax:"*";inherits:false;}
@property --un-saturate{syntax:"*";inherits:false;}
@property --un-sepia{syntax:"*";inherits:false;}
/* layer: theme */
:root, :host { --spacing: 0.25rem; --font-sans: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; --font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; --default-font-family: var(--font-sans); --default-monoFont-family: var(--font-mono); }
/* layer: base */
 *, ::after, ::before, ::backdrop, ::file-selector-button { box-sizing: border-box;  margin: 0;  padding: 0;  border: 0 solid;  }  html, :host { line-height: 1.5;  -webkit-text-size-adjust: 100%;  tab-size: 4;  font-family: var( --default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' );  font-feature-settings: var(--default-font-featureSettings, normal);  font-variation-settings: var(--default-font-variationSettings, normal);  -webkit-tap-highlight-color: transparent;  }  hr { height: 0;  color: inherit;  border-top-width: 1px;  }  abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; }  h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }  a { color: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; }  b, strong { font-weight: bolder; }  code, kbd, samp, pre { font-family: var( --default-monoFont-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace );  font-feature-settings: var(--default-monoFont-featureSettings, normal);  font-variation-settings: var(--default-monoFont-variationSettings, normal);  font-size: 1em;  }  small { font-size: 80%; }  sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; }  table { text-indent: 0;  border-color: inherit;  border-collapse: collapse;  }  :-moz-focusring { outline: auto; }  progress { vertical-align: baseline; }  summary { display: list-item; }  ol, ul, menu { list-style: none; }  img, svg, video, canvas, audio, iframe, embed, object { display: block;  vertical-align: middle;  }  img, video { max-width: 100%; height: auto; }  button, input, select, optgroup, textarea, ::file-selector-button { font: inherit;  font-feature-settings: inherit;  font-variation-settings: inherit;  letter-spacing: inherit;  color: inherit;  border-radius: 0;  background-color: transparent;  opacity: 1;  }  :where(select:is([multiple], [size])) optgroup { font-weight: bolder; }  :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; }  ::file-selector-button { margin-inline-end: 4px; }  ::placeholder { opacity: 1; }  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px)  { ::placeholder { color: color-mix(in oklab, currentcolor 50%, transparent); } }  textarea { resize: vertical; }  ::-webkit-search-decoration { -webkit-appearance: none; }  ::-webkit-date-and-time-value { min-height: 1lh;  text-align: inherit;  }  ::-webkit-datetime-edit { display: inline-flex; }  ::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { padding-block: 0; }  ::-webkit-calendar-picker-indicator { line-height: 1; }  :-moz-ui-invalid { box-shadow: none; }  button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button { appearance: button; }  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; }  [hidden]:where(:not([hidden~='until-found'])) { display: none !important; }
/* layer: preflights */
/* suppe base design — tokens + components. Injected into the UnoCSS build via
   uno.config.ts preflights; also usable directly as static/uno.css.
   Ports the approved v5 identity: carbon topbar, centered content, semantic
   colour only, table in a bordered panel. */

/* Inter — self-hosted (OFL). Weights 400/500/600/700. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('/web/static/fonts/inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('/web/static/fonts/inter-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('/web/static/fonts/inter-600.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;
  src:url('/web/static/fonts/inter-700.woff2') format('woff2');}
/* IBM Plex Mono — keys, timestamps, numeric cells (SLA warn/breach use 600/700). */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/web/static/fonts/plexmono-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('/web/static/fonts/plexmono-500.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url('/web/static/fonts/plexmono-600.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:700;font-display:swap;
  src:url('/web/static/fonts/plexmono-700.woff2') format('woff2');}

:root {
  --canvas:#ececed; --bg:#ffffff; --alt:#f6f6f7;
  --line:#ededee; --line2:#e3e3e5;
  --text:#1b1c1e; --muted:#71747a; --faint:#a1a3a8; --hi:#26272a; --row-hover:#f4f4f5;
  --logo:#71747b; /* muted dark gray on the carbon topbar (same in both themes) */
  --accent:#2f6bff; --accent-weak:rgba(47,107,255,.08); --accent-weak2:rgba(47,107,255,.16);
  --warn:#c07708; --neg:#d92f49; --pos:#0a9e68; --violet:#7c5cff;
  --carbon:#0c0d10; --con:#eceef1; --con-mut:#888e99; --con-hover:rgba(255,255,255,.07);
  --row-py:13px; --pad:20px; --fs:15px; --top-h:64px; --maxw:1600px; --gutter:32px; --pane-w:560px;
  /* Type scale — all relative to --fs, so changing --fs (density, or a future
     user setting) moves everything. Roles: --fs = body (row/name/subject,
     message body, inputs); --fs-sm = meta (sub-lines, timestamps, label/value,
     controls, status/priority/assignee); --fs-xs/--fs-2xs = captions (uppercase
     labels, chips, tags); --fs-lg/--fs-xl = headings. */
  --fs-2xs:calc(var(--fs)*.72); --fs-xs:calc(var(--fs)*.80); --fs-sm:calc(var(--fs)*.88);
  --fs-lg:calc(var(--fs)*1.22); --fs-xl:calc(var(--fs)*1.42);
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
:root[data-density="compact"]{ --row-py:7px; --pad:15px; --fs:13px; --gutter:22px; }

@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --canvas:#161719; --bg:#1e1f22; --alt:#26282b; --line:#2a2c2f; --line2:#35373b;
  --text:#e9eaec; --muted:#9b9fa4; --faint:#616469; --hi:#e9eaec; --row-hover:#1e1f21;
  --accent:#4d82ff; --accent-weak:rgba(77,130,255,.16); --accent-weak2:rgba(77,130,255,.30);
  --warn:#e8a41c; --neg:#f6465d; --pos:#0ecb81; --carbon:#101113; --violet:#a78bfa;
}}
:root[data-theme="dark"]{
  --canvas:#161719; --bg:#1e1f22; --alt:#26282b; --line:#2a2c2f; --line2:#35373b;
  --text:#e9eaec; --muted:#9b9fa4; --faint:#616469; --hi:#e9eaec; --row-hover:#1e1f21;
  --accent:#4d82ff; --accent-weak:rgba(77,130,255,.16); --accent-weak2:rgba(77,130,255,.30);
  --warn:#e8a41c; --neg:#f6465d; --pos:#0ecb81; --carbon:#101113; --violet:#a78bfa;
}

*{box-sizing:border-box;} html,body{height:100%;margin:0;}
body{background:var(--canvas);color:var(--text);font-family:var(--sans);font-size:var(--fs);line-height:1.5;-webkit-font-smoothing:antialiased;}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;}
a{color:inherit;text-decoration:none;}
input::placeholder,textarea::placeholder{color:var(--faint);opacity:.75;}

/* Topbar — full-width carbon, centered content */
.top{position:fixed;top:0;left:0;right:0;height:var(--top-h);z-index:50;background:var(--carbon);color:var(--con);box-shadow:0 1px 0 rgba(0,0,0,.35);}
.top-inner{max-width:var(--maxw);width:100%;height:100%;margin:0 auto;display:flex;align-items:center;padding:0 var(--gutter);}
/* Brand lockup: mark (suppelogo.svg) + wordmark (suppe.svg), both rendered as
   masks so their colour is set here in CSS. aspect-ratio comes from each SVG's
   viewBox, so only the height needs setting — width follows automatically.
   Horizontal by default (top-bar); vertical + larger with .brand-stack. */
.brand{display:inline-flex;align-items:center;gap:10px;margin-right:32px;}
.brand-mark{flex:0 0 auto;width:auto;height:36px;aspect-ratio:1;background-color:#9f0712;
  -webkit-mask:url('/web/static/suppelogo.svg') no-repeat center/contain;
  mask:url('/web/static/suppelogo.svg') no-repeat center/contain;}
.brand-word{flex:0 0 auto;width:auto;height:23px;aspect-ratio:256/93;background-color:#ffffff;
  -webkit-mask:url('/web/static/suppe.svg') no-repeat center/contain;
  mask:url('/web/static/suppe.svg') no-repeat center/contain;transition:background-color .12s;}
/* .brand:hover .brand-word{background-color:#303033;} */
/* Quick shiver on hover — a rapid damped wobble that returns to rest. */
.brand:hover .brand-mark{animation:brand-shiver .5s linear;}
@keyframes brand-shiver{
  0%{transform:translate(0,0) rotate(0deg);}
  7%{transform:translate(-2px,1px) rotate(22deg);}
  15%{transform:translate(2px,-2px) rotate(-19deg);}
  23%{transform:translate(-2px,-1px) rotate(26deg);}
  32%{transform:translate(1px,2px) rotate(-11deg);}
  41%{transform:translate(-2px,0) rotate(18deg);}
  50%{transform:translate(2px,-2px) rotate(-24deg);}
  59%{transform:translate(-1px,2px) rotate(9deg);}
  68%{transform:translate(2px,1px) rotate(-16deg);}
  77%{transform:translate(-2px,-1px) rotate(12deg);}
  86%{transform:translate(1px,1px) rotate(-7deg);}
  94%{transform:translate(-1px,0) rotate(4deg);}
  100%{transform:translate(0,0) rotate(0deg);}
}
@media (prefers-reduced-motion:reduce){ .brand:hover .brand-mark{animation:none;} }
.brand-stack{display:flex;flex-direction:column;align-items:center;gap:18px;margin:0 auto 48px;}
.brand-stack .brand-mark{height:52px;}
.brand-stack .brand-word{height:34px;background-color:#262628;}
.nav{display:flex;align-items:center;gap:4px;}
.nav a{display:flex;align-items:center;padding:8px 14px;border-radius:9px;color:var(--con-mut);font-weight:500;transition:background .12s,color .12s;}
.nav a:hover{color:var(--con);}
.nav a.active{color:var(--con);font-weight:600;}
/* Admin dropdown trigger — a nav item that opens a menu (Användare / system /
   audit). Styled like the nav links. */
.nav-dd{align-self:stretch;}
.nav-item{display:flex;align-items:center;height:100%;padding:8px 14px;border:0;background:none;font:inherit;font-weight:500;color:var(--con-mut);border-radius:9px;cursor:pointer;transition:color .12s;}
.nav-item:hover{color:var(--con);}
.nav-item.active{color:var(--con);font-weight:600;}
.sp{flex:1;}

/* Centered content column */
.shell{max-width:var(--maxw);width:100%;margin:var(--top-h) auto 0;min-height:calc(100vh - var(--top-h));display:flex;flex-direction:column;padding:0 var(--gutter) 24px;}

/* Sub-bar */
.subbar{display:flex;align-items:center;gap:20px;padding:40px 2px 32px;}
.grp{display:flex;background:var(--bg);border:1px solid var(--line2);border-radius:9px;padding:3px;}
.grp button,.grp a{font:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer;padding:6px 14px;border-radius:6px;border:0;background:transparent;color:var(--muted);}
.grp button:hover,.grp a:hover{color:var(--text);}
.grp .on{background:var(--accent-weak);color:var(--text);box-shadow:inset 0 0 0 1px var(--accent);}
.sel-btn{font:inherit;font-size:var(--fs-sm);cursor:pointer;padding:8px 13px;border-radius:9px;border:1px solid var(--line2);background:var(--bg);color:var(--muted);white-space:nowrap;}
.sel-btn:hover{color:var(--text);border-color:var(--muted);}
/* Icon-only variant: borderless like the topbar icons — bg only on hover. */
.sel-btn.ic{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;font-size:20px;background:transparent;border:0;color:var(--muted);transition:background .12s,color .12s;}
.sel-btn.ic:hover{background:var(--alt);color:var(--text);}
/* Larger for the identity icon leading a detail title. */
.cust-head .sel-btn.ic:first-child{font-size:24px;}
.count{color:var(--faint);font-size:var(--fs-sm);}
.search{margin-left:auto;display:flex;align-items:center;gap:9px;background:var(--bg);border:1px solid var(--line2);border-radius:9px;padding:8px 10px;color:var(--faint);min-width:260px;font-size:var(--fs);cursor:text;}
.search .kk{margin-left:auto;font-family:var(--mono);font-size:var(--fs-xs);background:var(--alt);border:1px solid var(--line2);border-radius:5px;padding:1px 6px;color:var(--muted);}
.search-ic{flex:0 0 auto;color:var(--faint);font-size:1.05em;}
.search-input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:var(--fs);color:var(--text);}
.search-input:focus{outline:none;}
/* Border on the wrapper, so mirror the input hover/focus states there. */
.search{transition:border-color .12s;}
.search:hover{border-color:var(--faint);}
.search:focus-within{border-color:var(--accent);}
/* Inbox subbar: quick-filters (line/view/assignee) + combined Filter popover
   + active chips; count + search pinned to the right edge. */
.subbar{flex-wrap:wrap;}
.subbar-right{margin-left:auto;display:flex;align-items:center;gap:14px;}
.subbar-right .search{margin-left:0;}
.filter-btn{display:inline-flex;align-items:center;gap:7px;}
.filter-btn .i-iconoir-filter-list{font-size:1.15em;}
.filter-btn.on{color:var(--text);border-color:var(--accent);background:var(--accent-weak);}
.filter-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:#fff;font-size:var(--fs-2xs);font-weight:700;}
.filter-menu{min-width:212px;padding:6px;}
.filter-lbl{font-size:var(--fs-2xs);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:700;padding:9px 9px 4px;}
.filter-opt{display:flex;align-items:center;width:100%;text-align:left;font:inherit;font-size:var(--fs-sm);color:var(--text);background:none;border:0;border-radius:7px;padding:7px 9px;cursor:pointer;}
.filter-opt:hover{background:var(--alt);}
.filter-opt.on{background:var(--accent-weak);color:var(--text);font-weight:600;box-shadow:inset 0 0 0 1px var(--accent);}
.sorth{display:inline-flex;align-items:center;gap:3px;font:inherit;font-size:var(--fs-xs);letter-spacing:.05em;text-transform:uppercase;color:var(--faint);font-weight:600;background:none;border:0;padding:0;cursor:pointer;white-space:nowrap;}
.sorth:hover{color:var(--muted);}
.sorth .sarr{flex:0 0 auto;color:var(--hi);font-size:1.15em;}
.sorth .shint{flex:0 0 auto;color:var(--hi);font-size:1.15em;opacity:0;transition:opacity .1s;}
.sorth:hover .shint{opacity:1;}
.filter-chip{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--text);background:var(--accent-weak);box-shadow:inset 0 0 0 1px var(--accent);border-radius:8px;padding:3px 6px 3px 10px;}
.filter-chip button{border:0;background:none;color:var(--muted);cursor:pointer;font-size:var(--fs-sm);padding:0 2px;}
.filter-chip button:hover{color:var(--text);}

/* Table — borderless at rest (Binance-clean). Hover = subtle rounded bg fill;
   selection = accent-weak fill. No lines. */
.list{background:transparent;}
/* border-spacing gives a slight vertical gap so adjacent hover/selection fills
   never touch. */
table{width:100%;border-collapse:separate;border-spacing:0 4px;font-variant-numeric:tabular-nums;}
/* "Bleed": the row/header hover + selection fill overhang the content guide
   left/right (cells keep their --pad inset, so text stays on the guide). Bleeds
   into the shell gutter. When the pane is open the right side is clamped so the
   overhang can't collide with the pane. */
.list table{width:calc(100% + var(--pad) * 2);margin-left:calc(var(--pad) * -1);}
.work.split .list table{width:calc(100% + var(--pad));}
/* Inbox: keep auto layout (every other column sizes to its content, so no
   wrapping and the header lines up) and only cap the Ärende column so a long
   subject truncates. Scoped to #list. */
#list tbody td:first-child,#list thead th:first-child{max-width:400px;}
thead th{text-align:left;font-size:var(--fs-xs);letter-spacing:.05em;text-transform:uppercase;color:var(--faint);font-weight:600;padding:11px var(--pad);white-space:nowrap;}
thead tr:hover th{background:var(--row-hover);}
thead th:first-child{border-top-left-radius:9px;border-bottom-left-radius:9px;}
thead th:last-child{border-top-right-radius:9px;border-bottom-right-radius:9px;}
thead th.r{text-align:right;}
tbody td{padding:var(--row-py) var(--pad);vertical-align:middle;}
tbody td:first-child{border-top-left-radius:9px;border-bottom-left-radius:9px;}
tbody td:last-child{border-top-right-radius:9px;border-bottom-right-radius:9px;}
tbody tr{cursor:pointer;}
tbody tr:hover td{background:var(--row-hover);}
td.r{text-align:right;}
td.empty{color:var(--faint);text-align:center;padding:56px 48px;cursor:default;}
td.empty i{display:block;font-size:30px;margin:0 auto 12px;opacity:.85;}

/* Status cell: leading new/ping dot, then the status label. */
.st-cell{display:inline-flex;align-items:center;gap:9px;}
.newdot{flex:0 0 auto;width:10px;height:10px;border-radius:50%;--dot:var(--accent);background:var(--dot);position:relative;}
.newdot.support{--dot:var(--violet);}   /* Väntar på support — ball back with us */
/* UptimeRobot-style "ping": a fixed ~1s expanding, fading ring. The interval
   between pings (4–20s, randomized per dot) is driven by JS re-adding .ping. */
.newdot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--dot);opacity:0;}
.newdot.ping::after{animation:newdot-ping .8s ease-out;}
@keyframes newdot-ping{from{transform:scale(1);opacity:.55;}to{transform:scale(5);opacity:0;}}
@media (prefers-reduced-motion:reduce){.newdot::after{display:none;}}
.cust-c{color:var(--muted);}

/* ── Identity text system (name / meta / code) — one consistent treatment for
   showing an entity (customer, contact, subject, key) across all pages.
   Stacked via .id, or inline; .id-lg bumps the name for detail headings. */
.id{display:flex;flex-direction:column;gap:1px;min-width:0;}
.id-name{font-weight:600;color:var(--text);line-height:1.3;min-width:0;}
.id-sub{color:var(--muted);font-size:var(--fs-sm);min-width:0;}
.id-code{font-family:var(--mono);color:var(--faint);font-size:var(--fs-sm);font-variant-numeric:tabular-nums;}
.id-lg .id-name{font-size:var(--fs-lg);font-weight:650;}
/* Inbox: truncate identity lines so rows stay uniform. */
#list .id-name,#list .id-sub,#list .id-code{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Inbox weight: titles + customer are quiet by default; only cases that need
   attention (new, or waiting on support) get a heavy title, like unread mail. */
#list .id-name{font-weight:400;color:var(--muted);}
#list .row.attn .id-name{color:var(--text);}
#list .row.attn .subj{font-weight:700;}

/* Status — plain label, no colour blob. Terminal states dim. */
.st{color:var(--muted);font-size:var(--fs-sm);white-space:nowrap;}
.st.resolved,.st.cancelled,.st.closed{color:var(--faint);}
/* Status dot — one colour per state (neutral grey for waiting-on-customer). */
.sdot{flex:0 0 auto;width:1.1em;height:1.1em;border-radius:50%;background:var(--muted);}
.st.open .sdot{background:var(--accent);}
.st.in_progress .sdot{background:var(--warn);}
.st.waiting_support .sdot{background:var(--violet);}
.st.resolved .sdot{background:var(--pos);}
.st.cancelled .sdot,.st.closed .sdot{background:var(--faint);}

/* Priority — iconoir glyph carries the level; colour only high/urgent. */
.prio-tag{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--muted);}
.prio-tag i{font-size:1.15em;flex:0 0 auto;}
.prio-high{color:var(--warn);}
.prio-urgent{color:var(--neg);}

/* SLA */
.sla{font-size:var(--fs-sm);color:var(--muted);}
.sla.warn{color:var(--warn);font-weight:600;}
.sla.breach{color:var(--neg);font-weight:700;}

/* Assignee */
.who{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:var(--fs-sm);vertical-align:middle;}
.mava{width:30px;height:30px;box-sizing:border-box;flex:0 0 auto;border-radius:50%;background:var(--alt);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-xs);font-weight:500;}
.mava.empty{background:transparent;border:1px dashed var(--faint);}
/* Unassigned reads louder — it's a needs-action state. */
.who.unassigned{color:var(--text);font-weight:500;}

/* ── Master–detail: table card + preview pane card ─────────────────── */
.work{display:grid;grid-template-columns:1fr;gap:0;align-items:start;}
.work.split{grid-template-columns:minmax(0,1fr) var(--pane-w);gap:14px;}
.work.split .col-hide{display:none;}
/* In split mode the real last column (Uppdaterad) is hidden, so :last-child
   would round a hidden cell. Round the last VISIBLE cell (SLA = 5th) instead. */
.work.split tbody td:nth-child(5){border-top-right-radius:9px;border-bottom-right-radius:9px;}
/* Selected row (click / j-k nav): accent-weak fill. */
tbody tr.sel td{background:var(--accent-weak);}

.pane{display:none;}
.work.split .pane{display:flex;flex-direction:column;position:sticky;top:calc(var(--top-h) + 14px);
  max-height:calc(100vh - var(--top-h) - 40px);background:transparent;overflow:hidden;}

/* Detail body (shared by pane + full page) */
/* Detail sections float as separate --bg segments on the page canvas, with
   thin (4px) seams; only the far edges (header top, thread bottom) are rounded. */
.d-head{padding:16px 18px 14px;flex:0 0 auto;background:var(--bg);border-radius:14px 14px 0 0;margin-bottom:4px;}
.d-top{display:flex;align-items:center;gap:10px;}
.d-key{display:inline-block;margin-top:16px;color:var(--muted);font-size:var(--fs-sm);}
.d-actions{margin-left:auto;display:flex;gap:4px;align-items:center;}
.d-ico{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:7px;border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:var(--fs);}
.d-ico:hover{background:var(--alt);color:var(--text);}
.d-back{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-size:var(--fs-sm);}
.d-back:hover{color:var(--text);}
/* Full-page header: customer name (reassign dropdown) pushed to the right. */
.d-cust{display:inline-flex;align-items:center;gap:7px;min-width:0;}
/* Customer sits top-left of the card → open its dropdown left-aligned
   (rightward into the card), not right-aligned off the left edge. */
.d-cust .dd-menu{left:0;right:auto;}
.d-title{margin:14px 0 0;font-size:var(--fs-lg);font-weight:600;letter-spacing:-.01em;}
/* Card edit affordance: a filled icon button pinned bottom-right, shown on
   card hover — background by default, deepens on hover. Hidden while editing. */
.d-head,.case-desc{position:relative;}
.card-edit{position:absolute;right:12px;bottom:12px;opacity:0;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:0;border-radius:8px;background:var(--alt);color:var(--muted);cursor:pointer;font-size:16px;transition:opacity .12s,background .12s,color .12s;}
.d-head:hover .card-edit,.case-desc:hover .card-edit{opacity:1;}
.card-edit:hover{background:var(--line2);color:var(--text);}
.d-head:has(.edit-input) .card-edit,.case-desc:has(.edit-area) .card-edit{display:none;}
.pane-scroll{overflow:auto;flex:1;min-height:0;}

.meta{display:flex;flex-wrap:wrap;gap:7px;padding:12px 16px;}
.mchip{display:inline-flex;align-items:center;gap:6px;background:var(--alt);border-radius:8px;padding:5px 10px;font-size:var(--fs-sm);cursor:pointer;}
.mchip .k{color:var(--faint);}
.mchip .val{font-weight:600;display:inline-flex;align-items:center;gap:6px;}
.mchip .val.empty{color:var(--faint);font-weight:500;font-style:italic;}
/* Inline-edit affordance + editor select */
.editable{cursor:pointer;}
.mchip.editable:hover{outline:1px solid var(--line2);}
.st.editable:hover{color:var(--text);}
.edit-form{display:inline-flex;}
.edit-select{font:inherit;font-size:var(--fs-sm);padding:5px 8px;border-radius:8px;border:1px solid var(--accent);background:var(--bg);color:var(--text);cursor:pointer;}
.edit-select:focus{outline:none;}

.thread{padding:14px 16px;display:flex;flex-direction:column;gap:14px;background:var(--bg);border-radius:0 0 14px 14px;}
.sys{text-align:center;color:var(--faint);font-size:var(--fs-sm);}
.sys.cont{margin-top:-10px;}
/* Grouped system events: summary = latest change, expandable rest. */
.sys-grp>summary{list-style:none;cursor:pointer;color:var(--faint);}
.sys-grp>summary::-webkit-details-marker{display:none;}
.sys-grp>summary:hover{color:var(--muted);}
.sys-more-n{font-size:var(--fs-2xs);font-weight:700;color:var(--muted);background:var(--alt);border-radius:6px;padding:1px 6px;margin-left:3px;}
.sys-list{margin-top:5px;display:flex;flex-direction:column;gap:3px;}
.sys-item{color:var(--faint);font-size:var(--fs-xs);}
.msg{display:grid;grid-template-columns:30px 1fr;gap:10px;}
.msg .av{width:30px;height:30px;border-radius:50%;background:var(--alt);color:var(--muted);display:flex;align-items:center;justify-content:center;font-weight:500;font-size:var(--fs-xs);}
.msg.out .av{background:var(--accent);color:#fff;border-color:transparent;}
.bub{background:var(--alt);border-radius:10px;padding:10px 13px;}
.msg.out .bub{background:var(--accent-weak);}
.bh{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;gap:8px;}
.bh .nm{font-weight:600;font-size:var(--fs);}
.bh .tg{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--faint);}
.bh .tm{justify-self:end;color:var(--faint);font-size:var(--fs-sm);}
.bub p{margin:14px 0 4px 0;font-size:var(--fs);white-space:pre-wrap;}
.note{grid-column:1/-1;background:transparent;border:1px solid var(--faint);border-radius:8px;padding:9px 12px;}
.note-h{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;gap:10px;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.03em;text-transform:uppercase;}
.note-who{color:var(--text);font-size:var(--fs);font-weight:600;letter-spacing:0;text-transform:none;}
.note-lbl{color:var(--warn);}
.note-time{justify-self:end;color:var(--faint);font-family:var(--mono);font-weight:600;letter-spacing:0;text-transform:none;}
.note p{margin:14px 0 6px 0;font-size:var(--fs);white-space:pre-wrap;}

.cust{margin-top:11px;}
.cust-suggest{display:flex;align-items:center;gap:8px;margin-top:8px;padding:8px 11px;border-radius:9px;font-size:var(--fs-sm);color:var(--text);background:var(--accent-weak);box-shadow:inset 0 0 0 1px var(--accent);}
.cust-suggest i{color:var(--accent);flex:0 0 auto;}
.cust-suggest span{min-width:0;}
.suggest-link{margin-left:auto;flex:0 0 auto;font:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--accent);background:none;border:0;cursor:pointer;padding:2px 4px;}
.suggest-link:hover{text-decoration:underline;}
.t5{font-size:var(--fs-xs);letter-spacing:.07em;text-transform:uppercase;color:var(--faint);font-weight:700;margin-bottom:8px;}
/* Customer name is dimmed (the case title is the prominent element); it's a
   dropdown trigger, so hint it on hover. Name + customer-no share a row. */
.cust .id{margin-bottom:6px;}
.cust-name-row{display:inline-flex;align-items:center;gap:8px;min-width:0;}
.trig.cust-org{color:var(--muted);font-weight:600;line-height:1.3;}
.trig.cust-org:hover{color:var(--text);text-decoration:underline;}
.cust-open{flex:0 0 auto;align-self:center;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;color:var(--faint);transition:background .12s,color .12s;}
.cust-open:hover{background:var(--alt);color:var(--text);}

.ctx-cards{padding:12px 0;display:flex;flex-direction:column;gap:12px;}
.ctx-card{display:flex;align-items:center;gap:8px;border:1px dashed var(--line2);border-radius:10px;padding:11px 13px;color:var(--muted);font-size:var(--fs-sm);}
.ctx-card i{font-size:1.15em;color:var(--muted);}
.ctx-card span{margin-left:auto;color:var(--faint);}

/* Trigger reset (buttons that act as inline editable tokens). */
.trig{border:0;background:none;font-family:inherit;cursor:pointer;padding:0;color:inherit;}

/* Attribute tokens — value when set, ghost placeholder (name) when unset. */
/* Case meta zones: State (glanceable chips) over Classification (labeled). */
.case-meta{padding:13px 16px;background:var(--bg);margin-bottom:4px;}
.meta-state{display:flex;flex-wrap:wrap;gap:7px;align-items:center;}
.meta-class{margin-top:13px;padding-top:13px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:7px;}
.mrow{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline;}
.mrow .dd{justify-self:end;}
.mval{font:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--text);cursor:pointer;padding:3px 0;}
.mval.unset{color:var(--faint);font-weight:500;}
.mval:hover{text-decoration:underline;}
.mval i{font-size:1.1em;margin-right:3px;vertical-align:-2px;}
.mval.prio-high{color:var(--warn);}
.mval.prio-urgent{color:var(--neg);}
/* Rail properties: state and classification are separate cards (like the
   left column's segments). Within a card, ONE grid so headings share a column
   and dropdowns line up: headings (small) left, full-width dropdowns right. */
.prop-grid{display:grid;grid-template-columns:6.2em 1fr;column-gap:12px;row-gap:9px;align-items:center;}
.prop-grid .mrow{display:contents;}
.prop-grid .info-l{font-size:var(--fs-sm);}
.prop-grid .dd{justify-self:stretch;display:block;}
.prop-grid .dd-menu{right:0;left:auto;}
.prop-grid .mval,.prop-grid .st{display:inline-flex;align-items:center;gap:6px;width:100%;box-sizing:border-box;min-width:0;border:1px solid var(--line2);border-radius:8px;padding:6px 9px;background:var(--bg);}
.prop-grid .mval:hover,.prop-grid .st:hover{border-color:var(--faint);background:var(--alt);text-decoration:none;}
.prop-grid .mval::after,.prop-grid .st::after{content:"";margin-left:auto;flex:0 0 auto;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.45;}
.attr{display:inline-flex;align-items:center;gap:6px;background:var(--alt);border-radius:8px;padding:5px 11px;font-size:var(--fs-sm);font-weight:600;color:var(--text);cursor:pointer;}
.attr i{font-size:1.15em;flex:0 0 auto;}
.attr:hover{outline:1px solid var(--line2);}
.attr.unset{background:transparent;border:1px dashed var(--line2);color:var(--faint);font-weight:500;}
.attr.prio-high{color:var(--warn);}
.attr.prio-urgent{color:var(--neg);}

/* Custom dropdown (token stays put; menu drops below). */
.dd{position:relative;display:inline-flex;}
.dd .st{font-size:var(--fs-sm);}
.dd-menu{position:absolute;top:calc(100% + 5px);left:0;z-index:30;min-width:170px;
  background:var(--bg);border:1px solid var(--line2);border-radius:10px;
  box-shadow:0 10px 28px -8px rgba(0,0,0,.30);padding:5px;display:none;}
.dd.open .dd-menu{display:block;}
.attr-opt{display:block;width:100%;text-align:left;font:inherit;font-size:var(--fs-sm);
  padding:7px 10px;border-radius:7px;border:0;background:none;color:var(--text);cursor:pointer;white-space:nowrap;}
.attr-opt:hover{background:var(--alt);}
.attr-opt.sel{color:var(--accent);font-weight:600;}

/* Organization typeahead picker (in the quickview customer dropdown) */
.org-picker{width:300px;}
.op-search{display:flex;align-items:center;gap:8px;padding:4px 8px 8px;border-bottom:1px solid var(--line);margin-bottom:4px;}
.op-ic{color:var(--faint);font-size:1.05em;flex:0 0 auto;}
.op-input{flex:1;min-width:0;font:inherit;font-size:var(--fs-sm);border:0;background:none;color:var(--text);padding:2px 0;}
.op-input:focus{outline:none;}
.op-results{max-height:280px;overflow-y:auto;}
.op-opt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font:inherit;font-size:var(--fs-sm);
  padding:7px 10px;border-radius:7px;border:0;background:none;color:var(--text);cursor:pointer;}
.op-opt:hover{background:var(--alt);}
.op-opt.sel{color:var(--accent);font-weight:600;}
.op-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.op-no{flex:0 0 auto;color:var(--faint);font-size:var(--fs-xs);}
.op-none{color:var(--muted);font-style:italic;}
.op-empty{padding:12px 10px;color:var(--faint);font-size:var(--fs-sm);text-align:center;}
.op-new{display:flex;align-items:center;gap:7px;width:100%;font:inherit;font-size:var(--fs-sm);
  margin-top:4px;padding:8px 10px;border:0;border-top:1px solid var(--line);border-radius:0 0 7px 7px;
  background:none;color:var(--accent);cursor:pointer;}
.op-new:hover{background:var(--alt);}

.sla-row{display:flex;flex-wrap:wrap;gap:18px;padding:0 16px 12px;font-size:var(--fs-sm);color:var(--muted);}
.sla-row .k{color:var(--faint);}

/* Text editors */
.edit-input{font:inherit;font-size:var(--fs-sm);padding:5px 9px;border-radius:8px;border:1px solid var(--accent);background:var(--bg);color:var(--text);width:100%;box-sizing:border-box;}
.edit-input:focus{outline:none;}
/* Subject: a normal input, but keeping the title's size/weight. */
.edit-input.edit-title{display:block;width:100%;margin:9px 0 0;padding:6px 10px;border:1px solid var(--line2);border-radius:8px;
  background:var(--bg);font-size:var(--fs-lg);font-weight:600;letter-spacing:-.01em;color:var(--text);}
.edit-input.edit-title:focus{border-color:var(--accent);}
/* Pinned opening request — always near the top so the case's premise is
   visible without scrolling to the bottom of the thread. */
.case-desc{padding:14px 16px;background:var(--bg);margin-bottom:4px;}
.desc-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:0;}
.desc-h .t5{margin-bottom:0;}
.desc-h-r{display:inline-flex;align-items:center;gap:8px;min-width:0;}
.desc-meta{font-size:var(--fs-sm);color:var(--muted);white-space:nowrap;}
.desc-tag{flex:0 0 auto;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent);border-radius:6px;padding:2px 7px;}
.desc-body{margin:0;font-size:var(--fs);line-height:1.55;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere;margin:14px 0 6px 0;}
/* "Visa original" — a collapsible showing the untouched inbound message. */
.desc-orig{margin-top:16px;}
.desc-orig>summary{font-size:var(--fs-sm);color:var(--muted);cursor:pointer;width:fit-content;}
.desc-orig>summary:hover{color:var(--text);}
.desc-orig-body{margin:8px 0 0;font-size:var(--fs-sm);line-height:1.55;color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere;padding:8px 11px;background:var(--alt);border-radius:8px;}
.linklike{font:inherit;font-size:var(--fs-sm);color:var(--accent);background:none;border:0;padding:6px 0 0;cursor:pointer;}
.linklike:hover{text-decoration:underline;}
.edit-area{display:block;width:100%;box-sizing:border-box;font-family:var(--sans);font-size:var(--fs);line-height:1.55;color:var(--text);background:var(--bg);border:1px solid var(--line2);border-radius:8px;padding:8px 10px;resize:vertical;}
.edit-area:focus{outline:none;border-color:var(--accent);}

/* Composer now sits above the (newest-first) thread. */
.composer{padding:12px 16px 14px;background:var(--alt);margin-bottom:4px;box-shadow:inset 3px 0 0 var(--accent);}
.ctabs{display:flex;gap:16px;margin-bottom:9px;}
.ctabs button{font:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer;padding:2px 0;border:0;background:transparent;color:var(--faint);border-bottom:2px solid transparent;}
.ctabs button.on{color:var(--text);border-bottom-color:var(--accent);}
.cbox{display:block;width:100%;box-sizing:border-box;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:11px 13px;color:var(--text);font-family:var(--sans);font-size:var(--fs);resize:vertical;transition:min-height .12s ease;}
.cbox:focus{outline:none;border-color:var(--accent);}
.cbox::placeholder{color:var(--faint);}
/* Leading reply icon beside the field; removed on focus so the field
   expands to full width. */
.cbox-wrap{display:flex;align-items:center;gap:11px;}
.cbox-wrap .cbox{flex:1;min-width:0;width:auto;}
.cbox-wrap .cbox-ico{flex:0 0 auto;color:var(--faint);font-size:1.4em;}
/* "Composing" = focused OR the box has text — so a draft keeps it expanded
   when you click away (e.g. to copy something). */
.composer:focus-within .cbox-ico,
.composer:has(.cbox:not(:placeholder-shown)) .cbox-ico{display:none;}
/* Slim by default; grow + reveal the actions once the composer has focus. */
.composer:focus-within .cbox,
.composer:has(.cbox:not(:placeholder-shown)) .cbox{min-height:140px;}
.cact{display:none;align-items:center;flex-wrap:wrap;gap:10px;margin-top:10px;}
.composer:focus-within .cact,
.composer:has(.cbox:not(:placeholder-shown)) .cact{display:flex;}
.cact .chk{margin-left:auto;}
.attach-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 auto;border-radius:9px;color:var(--muted);cursor:pointer;font-size:18px;}
.attach-btn:hover{background:var(--alt);color:var(--text);}
/* Chosen files on their own line (never cramps the button row) */
.attach-names{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.attach-names:empty{display:none;}
.fchip{display:inline-flex;align-items:center;max-width:100%;font-size:var(--fs-xs);color:var(--muted);background:var(--alt);border:1px solid var(--line2);border-radius:7px;padding:3px 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.btn{font:inherit;font-weight:600;font-size:var(--fs-sm);cursor:pointer;padding:9px 16px;border-radius:8px;border:0;transition:filter .12s,color .12s,border-color .12s;}
.btn-p:hover{filter:brightness(.93);}
.btn-g:hover{color:var(--text);border-color:var(--muted);}
/* Buttons sitting inline with inputs match the input height (same font size;
   border-box makes the padding work out equal). */
/* Match the adjacent inputs' height exactly via a fixed control height +
   flex-centering (padding/line-height math isn't reliable — inputs use
   line-height:normal, buttons inherit 1.5). */
.admin-row .btn,.admin-add .btn{font-size:var(--fs-sm);height:36px;padding-top:0;padding-bottom:0;display:inline-flex;align-items:center;justify-content:center;}
.btn-p{background:var(--accent);color:#fff;}
.btn-g{background:var(--alt);color:var(--muted);border:1px solid var(--line2);}
.chk{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:var(--fs-sm);cursor:pointer;}

/* Full page wrapper */
/* Full case page: two columns — the case (left) + a context column (right).
   Cards are background-only, no border. The pane variant is untouched. */
/* margin-top matches the sticky inset (var(--top-h) + 16px is the sticky top),
   so the sticky column's rest position equals its stuck position — otherwise
   sticky shoves it down and the right column looks lower than the left. */
.fullcase{width:100%;max-width:1304px;margin:40px auto 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:24px;align-items:start;}
.case-main{max-width:800px;background:transparent;}
.case-main .pane-scroll{overflow:visible;}
.case-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:calc(var(--top-h) + 16px);}
.side-card,.org-card{background:var(--bg);border-radius:14px;padding:15px 17px;}
.side-card .t5,.org-card .t5{margin-bottom:11px;}
/* Per-card tinting (right-column context cards), echoing the legacy tool's
   alert palette: cases = selected-row blue, backup = good-green (status will
   flip it red/amber later), licenser = action-amber. */
.org-card.cases,.side-card.cases{background:var(--accent-weak);--ink:color-mix(in srgb,var(--accent) 55%,var(--text));}
.org-card.backup,.side-card.backup{background:color-mix(in srgb,var(--pos) 12%,transparent);--ink:color-mix(in srgb,var(--pos) 60%,var(--text));}
.org-card.licens,.side-card.licens{background:color-mix(in srgb,var(--warn) 13%,transparent);--ink:color-mix(in srgb,var(--warn) 62%,var(--text));}
/* Hue-matched ink for the title + placeholder, so text harmonises with the
   tint instead of washing out as grey (mirrors the legacy tool's fg/bg pairs). */
.cases .t5,.backup .t5,.licens .t5{color:var(--ink);}
.backup .side-empty,.licens .side-empty{color:var(--ink);}
/* Icon-first layout for the status cards: a big hue-inked icon in its own
   first column, title + status stacked in the body. */
.side-card.backup,.side-card.licens,.org-card.backup,.org-card.licens{display:flex;align-items:center;gap:15px;}
/* Icon sits (a bit smaller) inside a filled hue disc. Icon on the wrapper
   span, not the <i>, so the disc fill doesn't fight the icon's own mask. */
.card-ico{width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:20px;flex:0 0 auto;}
.backup .card-ico,.licens .card-ico{color:var(--ink);}
.backup .card-ico{background:color-mix(in srgb,var(--pos) 22%,transparent);}
.licens .card-ico{background:color-mix(in srgb,var(--warn) 24%,transparent);}
.card-body{min-width:0;}
.card-body .t5{margin-bottom:3px;}
.side-empty{display:flex;align-items:center;gap:8px;color:var(--faint);font-size:var(--fs-sm);}
@media (max-width:1080px){
  .fullcase{grid-template-columns:1fr;}
  .case-main{max-width:none;}
  .case-side{position:static;}
}

/* ── Onboarding wizard (full-screen, centered, Linear-style) ───────── */
.setup-body{background:var(--canvas);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;}
.setup{width:100%;max-width:340px;}
/* Login page (reuses .setup layout). Dev = e-mail form; SSO = Microsoft button. */
.login{display:flex;flex-direction:column;align-items:center;text-align:center;}
.login .setup-form{width:100%;}
.login-note{margin-top:16px;font-size:var(--fs-sm);color:var(--faint);max-width:34ch;line-height:1.5;}
/* Settings pages (user + admin share the pattern): a centred column, each
   section = title above a bleeding .admin-card, settings as inline rows that
   auto-save (no Save button). */
/* width:100% is required — as a flex item, margin:0 auto would otherwise
   shrink it to content width and the max-width never applies. */
.settings-col{width:100%;max-width:680px;margin:0 auto;padding:40px var(--pad) 0;}
.settings-col .settings-title{margin-bottom:32px;}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:40px;padding:6px 0;}
.set-row + .set-row{border-top:1px solid var(--line);}
.set-label{color:var(--muted);}
.set-value{color:var(--text);text-align:right;}
.set-select{font:inherit;font-size:var(--fs);padding:7px 30px 7px 11px;border:1px solid var(--line2);border-radius:9px;background:var(--bg);color:var(--text);cursor:pointer;}
.set-select:hover{border-color:var(--faint);}
.set-select:focus{outline:none;border-color:var(--accent);}
.ms-btn{display:inline-flex;align-items:center;gap:12px;font:inherit;font-size:var(--fs);font-weight:600;color:var(--text);background:var(--bg);border:1px solid var(--line2);border-radius:9px;padding:12px 20px;cursor:pointer;transition:border-color .12s;}
.ms-btn:hover{border-color:var(--muted);}
.ms-logo{display:grid;grid-template-columns:repeat(2,9px);grid-template-rows:repeat(2,9px);gap:2px;flex:0 0 auto;}
.ms-logo span{display:block;}
.ms-logo span:nth-child(1){background:#f25022;}
.ms-logo span:nth-child(2){background:#7fba00;}
.ms-logo span:nth-child(3){background:#00a4ef;}
.ms-logo span:nth-child(4){background:#ffb900;}
.setup-steps{display:flex;gap:8px;justify-content:center;margin-bottom:30px;}
.setup-steps .dot{width:7px;height:7px;border-radius:50%;background:var(--line2);transition:background .15s;}
.setup-steps .dot.on{background:var(--accent);}
.setup-h{font-size:calc(var(--fs)*1.6);font-weight:650;letter-spacing:-.02em;text-align:center;margin:0 0 8px;}
.setup-sub{color:var(--muted);text-align:center;margin:0 auto 28px;font-size:var(--fs);line-height:1.55;max-width:38ch;}
.setup-error{color:var(--neg);border:1px solid var(--neg);border-radius:9px;padding:9px 12px;margin-bottom:18px;font-size:var(--fs-sm);text-align:center;}
.setup-form{display:flex;flex-direction:column;gap:15px;}
.setup-form label{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-sm);color:var(--muted);}
.setup-form input{font-family:var(--sans);font-size:var(--fs);padding:10px 12px;border:1px solid var(--line2);border-radius:9px;background:var(--bg);color:var(--text);}
.setup-form input:focus{outline:none;border-color:var(--accent);}
.setup-btn{margin-top:8px;font-family:var(--sans);font-size:var(--fs-sm);font-weight:600;padding:11px;border:0;border-radius:9px;background:var(--accent);color:#fff;cursor:pointer;}
.setup-btn:hover{filter:brightness(.96);}
.opt{color:var(--faint);font-weight:400;}

/* ── Customers (Kunder) ────────────────────────────────────────────── */
.page-h{font-size:var(--fs-lg);font-weight:650;letter-spacing:-.01em;margin:0;}
.page-h .id-code{margin-right:.45em;vertical-align:.05em;}
.search-input{flex:1;min-width:0;font-family:var(--sans);font-size:var(--fs);border:0;background:transparent;color:var(--text);outline:none;}
.search-input::placeholder{color:var(--faint);opacity:.75;}
/* Single-column detail column (contact page). */

/* Customer detail: a narrow identity rail (name + info + contacts, sticky) and
   a wider activity column (backup, licenser, cases). */
.cust-head{width:100%;max-width:1200px;margin:0 auto;padding:40px var(--pad) 0;display:flex;align-items:center;gap:10px;}
.cust-cols{width:100%;max-width:1200px;margin:0 auto;padding:20px var(--pad) 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start;}
.detail-col{display:flex;flex-direction:column;gap:16px;}
.cust-name{margin:0;font-size:var(--fs-xl);font-weight:650;letter-spacing:-.01em;line-height:1.2;}
.info-list{display:flex;flex-direction:column;}
.info-row{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline;padding:8px 0;border-top:1px solid var(--line);}
.info-note{padding:8px 0;border-top:1px solid var(--line);}
.info-note .info-l{display:block;margin-bottom:5px;}
.note-text{color:var(--text);font-size:var(--fs);white-space:pre-wrap;overflow-wrap:anywhere;}
.info-row:first-child{border-top:0;}
.info-l{color:var(--muted);font-size:var(--fs);}
.info-v{min-width:0;color:var(--text);font-size:var(--fs);overflow-wrap:anywhere;text-align:right;}
.org-cell{display:inline-flex;align-items:center;gap:7px;color:var(--text);text-decoration:none;}
.org-cell:hover .org-name{text-decoration:none;}
.org-cell .info-open{color:var(--faint);font-size:1.05em;}
.org-cell:hover .info-open{color:var(--text);}
/* Contacts — compact stacked rows that fit the narrow rail. */
.contact{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:8px 10px;margin:0 -10px;border-radius:8px;cursor:pointer;}
.contact:hover{background:var(--alt);}
.ct-l{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;}
.ct-r{display:flex;flex-direction:column;align-items:flex-end;gap:4px;min-width:0;text-align:right;}
.ct-email{font-size:var(--fs-sm);color:var(--muted);}
.ct-phone{font-size:var(--fs-sm);color:var(--faint);}
.ct-l .id-name,.ct-email,.ct-phone{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Cases table inside a card — rows styled like the .contact list: no
   separators, a rounded slightly-inset hover pill (org + contact detail). */
.mini-cases{width:calc(100% + 20px);margin:0 -10px;border-collapse:separate;border-spacing:0;}
.mini-cases td{padding:8px 10px;vertical-align:middle;}
.mini-cases td.r{text-align:right;}
.mini-cases .st{font-size:var(--fs-sm);}
.mini-cases .cust-c{font-size:var(--fs-sm);}
.mini-cases tr.row{cursor:pointer;}
.mini-cases tr.row:hover td{background:var(--alt);}
.cases .mini-cases tr.row:hover td{background:var(--accent-weak2);}
.mini-cases tr.row:hover td:first-child{border-radius:8px 0 0 8px;}
.mini-cases tr.row:hover td:last-child{border-radius:0 8px 8px 0;}
@media (max-width:1000px){
  .cust-cols{grid-template-columns:1fr;}
  .cust-cols .case-side{position:static;}
}

/* ── Topbar icon actions (Ny · tema · profil) ──────────────────────── */
.topbar-actions{display:flex;align-items:center;gap:2px;}
.topbar-ic{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:9px;background:transparent;border:0;color:var(--con-mut);cursor:pointer;font-size:21px;transition:background .12s,color .12s;}
.topbar-ic:hover{color:var(--con);background:var(--con-hover);}
.topbar-dd .dd-menu{right:0;left:auto;top:calc(100% + 4px);}
/* Theme toggle shows the icon of the current effective theme (mirrors tokens). */
.theme-sun{display:none;} .theme-moon{display:inline-block;}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .theme-sun{display:inline-block;} :root:not([data-theme="light"]) .theme-moon{display:none;} }
:root[data-theme="dark"] .theme-sun{display:inline-block;} :root[data-theme="dark"] .theme-moon{display:none;}
:root[data-theme="light"] .theme-sun{display:none;} :root[data-theme="light"] .theme-moon{display:inline-block;}
.dd-menu a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:7px;font-size:calc(var(--fs)*.933);font-weight:400;color:var(--text);cursor:pointer;white-space:nowrap;}
.dd-menu a i{flex:none;font-size:1.3em;opacity:.9;}
.dd-menu a:hover{background:var(--alt);}
.dd-menu a.dd-danger{color:var(--neg);}
.dd-menu a.dd-danger:hover{background:color-mix(in srgb, var(--neg) 12%, transparent);}
.ny-soon{display:block;padding:8px 11px;font-size:var(--fs-sm);color:var(--faint);white-space:nowrap;}

/* ── Modal (create/edit) ───────────────────────────────────────────── */
.modal-backdrop{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.45);display:flex;align-items:flex-start;justify-content:center;padding:80px 20px;}
/* Confirm dialog — above the edit modal (z 200). */
.confirm-backdrop{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;padding:20px;}
.confirm-backdrop[hidden]{display:none;}
.confirm-box{width:100%;max-width:380px;background:var(--bg);border-radius:14px;box-shadow:0 20px 60px -10px rgba(0,0,0,.5);padding:20px;}
.confirm-msg{font-size:var(--fs);color:var(--text);margin-bottom:18px;}
.confirm-actions{display:flex;justify-content:flex-end;gap:10px;}
.btn-danger{background:var(--neg);color:#fff;}
.btn-danger:hover{filter:brightness(.93);}
.modal{width:100%;max-width:460px;background:var(--bg);border:1px solid var(--line2);border-radius:14px;box-shadow:0 20px 60px -10px rgba(0,0,0,.4);overflow:hidden;}
.modal-h{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;font-size:var(--fs);font-weight:650;border-bottom:1px solid var(--line);}
.modal-form{display:flex;flex-direction:column;gap:14px;padding:18px;}
.modal-form label{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-sm);color:var(--muted);}
.modal-form input,.modal-form textarea,.modal-form select{font-family:var(--sans);font-size:var(--fs);padding:9px 11px;border:1px solid var(--line2);border-radius:9px;background:var(--bg);color:var(--text);}
.modal-form select{cursor:pointer;}
.modal-form input:focus,.modal-form textarea:focus,.modal-form select:focus{outline:none;border-color:var(--accent);}
.modal-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:4px;}
.btn-del-text{font:inherit;font-weight:600;font-size:var(--fs-sm);color:var(--neg);background:none;border:0;cursor:pointer;padding:8px 4px;border-radius:8px;}
.btn-del-text:hover{text-decoration:underline;}
.del-reason{font-size:var(--fs-xs);color:var(--muted);max-width:62%;line-height:1.35;}

/* Contact modal: section header w/ add button + the org typeahead field */
.org-card-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.org-card-h .t5{margin-bottom:0;}
.ct-fixed{font-size:var(--fs-sm);color:var(--muted);}
.ct-fixed b{color:var(--text);font-weight:600;}
.ct-org{position:relative;}
.ct-org-results{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:5;
  background:var(--bg);border:1px solid var(--line2);border-radius:9px;
  box-shadow:0 10px 28px -8px rgba(0,0,0,.30);max-height:220px;overflow-y:auto;padding:4px;}
.ct-org-results:empty{display:none;}
.faint-cell{color:var(--faint);font-style:italic;}
.role-tag{display:inline-block;font-size:var(--fs-xs);font-weight:600;color:var(--muted);background:var(--alt);border:1px solid var(--line2);border-radius:6px;padding:1px 7px;}
.cell-link:hover{text-decoration:underline;}
.cinline{color:var(--faint);vertical-align:-2px;margin-right:4px;}

/* ── Admin page: left sub-menu + right cards ───────────────────────── */
/* Admin split into pages (via the topbar Admin dropdown): Systeminställningar
   is a narrow column (reuses .settings-col) with a section switcher; Användare
   and Auditlogg are wider standalone pages. */
.sys-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;}
.settings-col .sys-head .settings-title{margin-bottom:0;}
.admin-wide{width:100%;max-width:1000px;margin:0 auto;padding:40px var(--pad) 0;}
.admin-layout{display:grid;grid-template-columns:200px minmax(0,850px);gap:64px;align-items:start;padding:0 2px;}
.admin-menu{display:flex;flex-direction:column;gap:2px;position:sticky;top:calc(var(--top-h) + 12px);}
/* Nav items bleed like the cards: fill overhangs left/right, label stays put. */
.admin-mi{display:block;padding:9px var(--pad);margin:0 calc(var(--pad) * -1);border-radius:9px;font-size:var(--fs-sm);font-weight:500;color:var(--muted);cursor:pointer;}
.admin-mi:hover{background:var(--alt);color:var(--text);}
.admin-mi.on{background:var(--accent-weak);color:var(--text);font-weight:600;}
.admin-mi.soon{color:var(--faint);cursor:default;display:flex;align-items:center;justify-content:space-between;}
.admin-mi.soon:hover{background:none;}
.soon-tag{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.05em;background:var(--alt);border:1px solid var(--line2);border-radius:5px;padding:0 5px;color:var(--faint);}

/* Card = background only, no border (general rule). Group title + description
   live ABOVE the card (Linear-style), not inside it. */
/* Card bg bleeds past the content guide left/right (into the menu gap / shell
   gutter); the --pad padding keeps content aligned with the title above. */
.admin-card{background:var(--bg);border-radius:14px;padding:20px;margin:0 calc(var(--pad) * -1);}
.admin-section{margin-bottom:26px;}
.admin-section:last-child{margin-bottom:0;}
.admin-section-h{margin:0 0 12px;}
.admin-section-h.row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;}
.admin-title{font-size:var(--fs);font-weight:650;}
.admin-desc{font-size:var(--fs-sm);color:var(--muted);margin-top:3px;}
.admin-rows{display:flex;flex-direction:column;gap:8px;}
.admin-row{display:flex;align-items:center;gap:10px;}
/* Drag-to-sort handle (first column). */
.admin-drag{flex:0 0 auto;width:20px;text-align:center;}
.admin-drag.drag{color:var(--faint);cursor:grab;line-height:1;user-select:none;}
.admin-drag.drag:hover{color:var(--muted);}
.admin-row.dragging{opacity:.5;}
/* Head aligns to the data columns (no extra inset); even gap via the flex gap. */
.admin-row.head{color:var(--faint);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em;padding:0;}
/* Column-header labels inherit the caption size (their data-cell classes set
   their own font-size, which would otherwise leak into the header row). */
.admin-row.head span{font-size:inherit;font-family:var(--sans);}
.admin-row.off .admin-name{color:var(--faint);text-decoration:line-through;}
.admin-name{flex:1;min-width:0;height:36px;font-family:var(--sans);font-size:var(--fs-sm);padding:0 10px;border:1px solid var(--line2);border-radius:9px;background:var(--bg);color:var(--text);}
.admin-row.head .admin-name{border:0;padding:0 11px;background:none;height:auto;}
.admin-name:focus{outline:none;border-color:var(--accent);}
.admin-sort{width:74px;flex:0 0 auto;height:36px;text-align:center;font-family:var(--mono);font-size:var(--fs-sm);padding:0 6px;border:1px solid var(--line2);border-radius:9px;background:var(--bg);color:var(--text);}
.admin-row.head .admin-sort{border:0;padding:0;background:none;height:auto;}
.admin-row.head .admin-del{height:auto;}
.admin-sort:focus{outline:none;border-color:var(--accent);}
.admin-flag{flex:0 0 auto;width:48px;display:flex;align-items:center;justify-content:center;}
.admin-act{flex:0 0 auto;width:84px;}
.admin-del{flex:0 0 auto;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;color:var(--faint);cursor:pointer;font-size:17px;border-radius:9px;transition:background .12s,color .12s;}
.admin-del:hover{color:var(--neg);background:var(--alt);}
.admin-empty{color:var(--faint);font-size:var(--fs-sm);padding:10px 2px;}
.admin-add{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);}
.admin-lineselect{margin-bottom:16px;}
.admin-lineselect label{display:flex;flex-direction:column;gap:5px;font-size:var(--fs-sm);color:var(--muted);max-width:280px;}
.admin-lineselect select{font-family:var(--sans);font-size:var(--fs);padding:8px 10px;border:1px solid var(--line2);border-radius:9px;background:var(--bg);color:var(--text);}
.admin-lineselect select:focus{outline:none;border-color:var(--accent);}
/* Users: read-only rows (edit via modal) */
.admin-uname{flex:1;min-width:0;font-size:var(--fs);}
.admin-umail{flex:1.4;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-sm);}
.admin-badge{flex:0 0 auto;width:88px;}
.urow{border-radius:9px;padding:9px 8px;margin:0 -8px;cursor:pointer;}
.urow:hover{background:var(--alt);}
.urow .admin-act{color:var(--muted);display:flex;justify-content:flex-end;font-size:1.3em;opacity:0;transition:opacity .12s;}
.urow:hover .admin-act{opacity:1;}
.urow .admin-act:hover{color:var(--text);}
.muted-hint{color:var(--faint);font-weight:400;}
.modal-form .modal-chk{flex-direction:row;align-items:center;gap:8px;color:var(--text);}
.modal-sep{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.05em;color:var(--faint);border-top:1px solid var(--line);padding-top:12px;margin-top:2px;}

/* Lines & mailboxes */
.line-block{padding:15px 0;}
.line-block:first-child{padding-top:0;}
.line-block + .line-block{border-top:1px solid var(--line);}
.line-block.off{opacity:.6;}
.line-head{display:flex;align-items:center;gap:10px;}
.line-name{font-size:var(--fs);font-weight:650;}
.line-active{display:inline-flex;align-items:center;}
.line-active .chk{font-size:var(--fs-sm);color:var(--muted);}
.mb-list{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:2px;}
.mb-row{display:flex;align-items:center;gap:9px;padding:7px 8px;margin:0 -8px;border-radius:8px;cursor:pointer;font-size:var(--fs-sm);}
.mb-row:hover{background:var(--alt);}
.mb-row.off{opacity:.6;}
.mb-addr{font-size:var(--fs-sm);}
.mb-add{align-self:flex-start;margin-top:4px;font:inherit;font-size:var(--fs-sm);color:var(--accent);background:none;border:0;cursor:pointer;padding:4px 8px;margin-left:-8px;border-radius:7px;}
.mb-add:hover{background:var(--alt);}

/* Graph/e-post status card */
.gbadge{display:inline-block;font-size:var(--fs-xs);font-weight:600;border-radius:6px;padding:2px 8px;}
.gbadge.ok{color:var(--pos);background:color-mix(in srgb,var(--pos) 14%,transparent);}
.gbadge.bad{color:var(--neg);background:color-mix(in srgb,var(--neg) 14%,transparent);}
.graph-test:not(:empty){margin-top:12px;}

/* Attachments in the conversation */
.atts{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px;}
.att{display:inline-flex;align-items:center;gap:7px;text-decoration:none;}
.att-file{padding:6px 10px;border:1px solid var(--line2);border-radius:9px;background:var(--bg);color:var(--text);font-size:var(--fs-sm);max-width:240px;}
.att-file:hover{border-color:var(--muted);}
.att-file i{color:var(--muted);flex:0 0 auto;}
.att-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.att-size{color:var(--faint);font-size:var(--fs-xs);flex:0 0 auto;}
.att-img img{max-width:180px;max-height:140px;border-radius:9px;border:1px solid var(--line2);display:block;object-fit:cover;}
.att-img:hover img{border-color:var(--muted);}

/* Form-control border hover. Placed LAST so it wins the specificity tie
   against component base borders (e.g. `.modal-form input`) on :hover; the
   accent :focus rules are higher-specificity and still win. */
input:hover,select:hover,textarea:hover{border-color:var(--faint);}

/* Auditlogg table */
.audit-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);}
.audit-table th{text-align:left;font-size:var(--fs-xs);letter-spacing:.05em;text-transform:uppercase;color:var(--faint);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap;}
.audit-table td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere;}
.audit-table tr:last-child td{border-bottom:0;}

/* Destructive icon button (e.g. GDPR anonymise) — red on hover. */
.sel-btn.ic.danger:hover{background:color-mix(in srgb,var(--neg) 14%,transparent);color:var(--neg);}

/* Numeric/text setting input (auto-save rows) */
.set-input{font:inherit;font-size:var(--fs);padding:7px 11px;border:1px solid var(--line2);border-radius:9px;background:var(--bg);color:var(--text);width:90px;text-align:right;}
.set-input:hover{border-color:var(--faint);}
.set-input:focus{outline:none;border-color:var(--accent);}
/* Drop the cramped native number spinner — type the value, matches text fields */
.set-input[type=number]{appearance:textfield;-moz-appearance:textfield;}
.set-input[type=number]::-webkit-inner-spin-button,
.set-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}

/* Inbox pager */
.pager{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:32px 0;flex-wrap:wrap;}
.pager-nav{display:flex;align-items:center;gap:10px;}
.pager-btn{display:inline-flex;align-items:center;gap:4px;font:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--muted);background:var(--bg);border:1px solid var(--line2);border-radius:9px;padding:7px 12px;cursor:pointer;}
.pager-btn:hover{color:var(--text);border-color:var(--faint);}
.pager-btn.disabled{opacity:.45;cursor:default;}
.pager-btn .i-iconoir-nav-arrow-left,.pager-btn .i-iconoir-nav-arrow-right{font-size:1.2em;}
.pager-pages{display:flex;align-items:center;gap:4px;}
.pager-num{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 8px;font:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--muted);background:var(--bg);border:1px solid var(--line2);border-radius:8px;cursor:pointer;font-variant-numeric:tabular-nums;}
button.pager-num:hover{color:var(--text);border-color:var(--faint);}
.pager-num.on{background:var(--accent-weak);color:var(--text);border-color:transparent;box-shadow:inset 0 0 0 1px var(--accent);cursor:default;}
.pager-gap{color:var(--faint);padding:0 2px;}
.pager-size{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--muted);}

/* Expandable cases card (Vercel-style chevron on the bottom edge) */
.cases-exp{position:relative;padding-bottom:16px;}
.mini-cases .row.cx-extra{display:none;}
.cx-toggle:checked ~ .mini-cases .row.cx-extra{display:table-row;}
.cx-all{display:none;text-align:center;font-size:var(--fs-sm);font-weight:600;color:var(--accent);padding:12px 0 6px;text-decoration:none;}
.cx-all:hover{text-decoration:underline;}
.cx-toggle:checked ~ .cx-all{display:block;}
.cx-btn{position:absolute;left:50%;bottom:0;transform:translate(-50%,50%);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--card);border:1px solid var(--line2);color:var(--muted);cursor:pointer;transition:transform .16s ease,color .16s,border-color .16s;z-index:1;}
.cx-btn:hover{color:var(--text);border-color:var(--faint);}
.cx-toggle:checked ~ .cx-btn{transform:translate(-50%,50%) rotate(180deg);}

/* Dataskydd (GDPR) — data-subject lookup + actions */
.gdpr-search{margin-left:0;min-width:0;width:100%;}
.gdpr-table{width:100%;margin:4px 0 0;}
.gdpr-table td{padding:11px 2px;vertical-align:middle;border-top:1px solid var(--line);}
.gdpr-table tr:first-child td{border-top:0;}
.gdpr-name{text-decoration:none;color:var(--text);font-weight:600;}
.gdpr-name:hover{color:var(--accent);}
.gdpr-sub{color:var(--muted);font-size:var(--fs-sm);margin-top:3px;}
.gdpr-acts{white-space:nowrap;}
.gdpr-acts .mini-btn + .mini-btn{margin-left:8px;}
.mini-btn{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--muted);background:var(--card);border:1px solid var(--line2);border-radius:8px;padding:5px 10px;cursor:pointer;text-decoration:none;}
.mini-btn:hover{color:var(--text);border-color:var(--faint);}
.mini-btn.danger:hover{color:var(--neg);border-color:var(--neg);}

/* Retention (Gallring) — impact preview + explicit Save */
.ret-impact{font-size:var(--fs-sm);color:var(--muted);padding:14px 0 0;line-height:1.5;text-align:left;}
.ret-impact i{font-size:1.05em;vertical-align:-2px;margin-right:5px;}
.ret-impact.ret-warn{color:var(--warn);}
.ret-impact.ret-warn strong{color:var(--text);}
.ret-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:14px;}
.ret-save{font:inherit;font-size:var(--fs-sm);font-weight:600;color:#fff;background:var(--accent);border:1px solid var(--accent);border-radius:9px;padding:7px 16px;cursor:pointer;}
.ret-save:hover{filter:brightness(1.07);}
.ret-save:disabled{opacity:.45;cursor:default;filter:none;}
.ret-saved{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-sm);color:var(--pos);font-weight:600;}

/* Profile activity heatmap (GitHub-style) */
.heatmap{margin-top:4px;}
.hm-scroll{overflow-x:auto;padding-bottom:4px;}
.hm-inner{display:flex;flex-direction:column;gap:5px;min-width:420px;}
.hm-months{display:grid;grid-template-columns:repeat(53,1fr);gap:3px;font-size:var(--fs-xs);color:var(--muted);height:1em;}
.hm-mon{white-space:nowrap;line-height:1;}
.hm-grid{display:grid;grid-template-columns:repeat(53,1fr);grid-template-rows:repeat(7,auto);grid-auto-flow:column;gap:3px;}
.hm-cell{width:10px;height:10px;border-radius:2px;background:color-mix(in srgb, var(--muted) 15%, transparent);}
.hm-grid .hm-cell{width:100%;height:auto;aspect-ratio:1;}
.hm-cell.l1{background:color-mix(in srgb, var(--accent) 32%, transparent);}
.hm-cell.l2{background:color-mix(in srgb, var(--accent) 55%, transparent);}
.hm-cell.l3{background:color-mix(in srgb, var(--accent) 78%, transparent);}
.hm-cell.l4{background:var(--accent);}
.hm-cell.empty{background:transparent;}
.hm-legend{display:flex;align-items:center;gap:4px;justify-content:flex-end;margin-top:12px;font-size:var(--fs-xs);color:var(--muted);}

/* ── Statistik page ─────────────────────────────────────────────────────── */
.stats-page{max-width:1240px;margin:0 auto;padding:34px 2px 60px;}
.stats-page .num{font-variant-numeric:tabular-nums;}
.stats-page .sbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:24px;}
.stats-page .sbar .sp{flex:1;}
.stats-page .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px;}
.stats-page .skpi{background:var(--bg);border-radius:14px;padding:16px 18px;}
.stats-page .skpi .lbl{font-size:var(--fs-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.05em;}
.stats-page .skpi .val{font-size:28px;font-weight:700;margin-top:6px;letter-spacing:-.02em;}
.stats-page .skpi .foot{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:var(--fs-xs);color:var(--muted);}
.stats-page .delta{font-weight:700;}
.stats-page .delta.good{color:var(--pos);} .stats-page .delta.bad{color:var(--neg);} .stats-page .delta.flat{color:var(--muted);}
.stats-page .grid{display:grid;grid-template-columns:1.9fr 1fr;gap:14px;margin-top:14px;}
.stats-page .grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:14px;}
.stats-page .panel{background:var(--bg);border-radius:14px;padding:18px 20px;min-width:0;}
.stats-page .p-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:16px;}
.stats-page .p-h h2{font-size:var(--fs);font-weight:700;margin:0;}
.stats-page .p-h .sub{font-size:var(--fs-xs);color:var(--muted);white-space:nowrap;}
.stats-page .legend{display:flex;gap:16px;font-size:var(--fs-xs);color:var(--muted);}
.stats-page .legend b{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;}
.stats-page .tchart{width:100%;height:240px;}
.stats-page .nodata{color:var(--faint);font-size:var(--fs-sm);padding:14px 0;}
.stats-page .donut-wrap{display:flex;align-items:center;gap:22px;}
.stats-page .donut{flex:none;}
.stats-page .donut .ctr-v{fill:var(--text);font-size:26px;font-weight:700;}
.stats-page .donut .ctr-l{fill:var(--muted);font-size:11px;}
.stats-page .dlist{display:flex;flex-direction:column;gap:11px;flex:1;min-width:0;}
.stats-page .drow{display:flex;align-items:center;gap:9px;font-size:var(--fs-sm);}
.stats-page .dot{width:10px;height:10px;border-radius:3px;flex:none;}
.stats-page .drow .nm{color:var(--text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.stats-page .drow .ct{color:var(--muted);font-weight:600;}
.stats-page .bars{display:flex;flex-direction:column;gap:13px;}
.stats-page .brow{display:grid;grid-template-columns:140px 1fr 34px;align-items:center;gap:12px;font-size:var(--fs-sm);}
.stats-page .brow .bn{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.stats-page .track{height:9px;background:var(--alt);border-radius:6px;overflow:hidden;}
.stats-page .fill{height:100%;border-radius:6px;background:var(--accent);}
.stats-page .bars-violet .fill{background:var(--violet);}
.stats-page .bars-pos .fill{background:var(--pos);}
.stats-page .brow .bv{text-align:right;font-weight:700;color:var(--text);}
.stats-page .clist{display:flex;flex-direction:column;}
.stats-page .crow{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--line);}
.stats-page .crow:first-child{border-top:0;}
.stats-page .rank{width:20px;color:var(--faint);font-weight:700;font-size:var(--fs-sm);text-align:right;}
.stats-page .crow .cn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.stats-page .crow .kk{color:var(--faint);font-size:var(--fs-xs);font-family:var(--mono);}
.stats-page .crow .cc{font-weight:700;}
.stats-page .uplot{font-family:var(--sans);}
@media(max-width:900px){
  .stats-page .kpis{grid-template-columns:repeat(2,1fr);}
  .stats-page .grid,.stats-page .grid2{grid-template-columns:1fr;}
}

/* Placeholder ("kommer snart") page */
.ph{max-width:540px;margin:0 auto;padding:120px 24px;text-align:center;}
.ph-ico{color:var(--faint);margin-bottom:24px;line-height:1;}
.ph-ico i{display:inline-block;font-size:80px;}
.ph-h{font-size:var(--fs-xl);font-weight:700;letter-spacing:-.01em;margin:0 0 12px;}
.ph-sub{color:var(--muted);font-size:var(--fs);line-height:1.65;margin:0;}
.ph-tag{display:inline-block;margin-top:22px;font-size:var(--fs-xs);font-weight:600;color:var(--accent);background:var(--accent-weak);border-radius:20px;padding:6px 15px;}

/* Seeded/demo "Exempel" badge */
.seed-tag{display:inline-flex;align-items:center;font-size:var(--fs-xs);font-weight:600;color:var(--warn);background:color-mix(in srgb, var(--warn) 15%, transparent);border-radius:6px;padding:1px 7px;vertical-align:1px;}

/* Systeminställningar — left sub-menu + content */
.admin-cols{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;width:100%;max-width:960px;margin:0 auto;padding:40px 0 40px;align-items:start;}
.admin-nav{display:flex;flex-direction:column;gap:2px;position:sticky;top:calc(var(--top-h) + 20px);}
.admin-nav-title{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;padding:6px 12px;margin-bottom:6px;}
.admin-nav-item{display:block;padding:8px 12px;border-radius:9px;font-size:var(--fs-sm);font-weight:500;color:var(--muted);text-decoration:none;}
.admin-nav-item:hover{color:var(--text);background:var(--alt);}
.admin-nav-item.on{color:var(--text);background:var(--accent-weak);box-shadow:inset 0 0 0 1px var(--accent);font-weight:600;}
.admin-main{min-width:0;padding:0 var(--pad);}
/* Match the compact --fs-sm content sizing of the lookup sections (info-list
   values + set-row controls otherwise inherit the larger body --fs). */
.admin-main .info-v{font-size:var(--fs-sm);}
.admin-main .set-label,.admin-main .set-value,.admin-main .set-input,.admin-main .set-select{font-size:var(--fs-sm);}
@media(max-width:760px){.admin-cols{grid-template-columns:1fr;gap:8px;}.admin-nav{position:static;flex-direction:row;flex-wrap:wrap;}}

/* layer: icons */
.i-iconoir-arrow-left{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M21 12H3m0 0l8.5-8.5M3 12l8.5 8.5'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-arrow-separate-vertical{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m17 8l-5-5l-5 5m10 8l-5 5l-5-5'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-attachment{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m21.438 11.662l-9.19 9.19a6.003 6.003 0 1 1-8.49-8.49l9.19-9.19a4.002 4.002 0 0 1 5.66 5.66l-9.2 9.19a2.001 2.001 0 1 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-building{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m10 9.01l.01-.011M14 9.01l.01-.011M10 13.01l.01-.011m3.99.011l.01-.011M10 17.01l.01-.011m3.99.011l.01-.011M6 20.4V5.6a.6.6 0 0 1 .6-.6H12V3.6a.6.6 0 0 1 .6-.6h4.8a.6.6 0 0 1 .6.6v16.8a.6.6 0 0 1-.6.6H6.6a.6.6 0 0 1-.6-.6'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-chat-lines{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M8 10h8m-8 4h4m0 8c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12c0 1.821.487 3.53 1.338 5L2.5 21.5l4.5-.838A9.96 9.96 0 0 0 12 22'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-check{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m5 13l4 4L19 7'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-cloud-upload{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M12 22v-9m0 0l3.5 3.5M12 13l-3.5 3.5M20 17.607c1.494-.585 3-1.918 3-4.607c0-4-3.333-5-5-5c0-2 0-6-6-6S6 6 6 8c-1.667 0-5 1-5 5c0 2.689 1.506 4.022 3 4.607'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-coffee-cup{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath d='M17 11.6V15a6 6 0 0 1-6 6H9a6 6 0 0 1-6-6v-3.4a.6.6 0 0 1 .6-.6h12.8a.6.6 0 0 1 .6.6M12 9c0-1 .714-2 2.143-2v0A2.857 2.857 0 0 0 17 4.143V3.5M8 9v-.5a3 3 0 0 1 3-3v0a2 2 0 0 0 2-2V3'/%3E%3Cpath d='M16 11h2.5a2.5 2.5 0 0 1 0 5H17'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-community{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M7 18v-1a5 5 0 0 1 5-5v0a5 5 0 0 1 5 5v1M1 18v-1a3 3 0 0 1 3-3v0m19 4v-1a3 3 0 0 0-3-3v0m-8-2a3 3 0 1 0 0-6a3 3 0 0 0 0 6m-8 2a2 2 0 1 0 0-4a2 2 0 0 0 0 4m16 0a2 2 0 1 0 0-4a2 2 0 0 0 0 4'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-download{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 20h12M12 4v12m0 0l3.5-3.5M12 16l-3.5-3.5'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-edit{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M3 21h18M12.222 5.828L15.05 3L20 7.95l-2.828 2.828m-4.95-4.95l-5.607 5.607a1 1 0 0 0-.293.707v4.536h4.536a1 1 0 0 0 .707-.293l5.607-5.607m-4.95-4.95l4.95 4.95'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-enlarge{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m15 9l5-5m0 0v4m0-4h-4M9 15l-5 5m0 0v-4m0 4h4'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-filter-list{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M3 6h18M7 12h10m-6 6h2'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-group{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-width='1.5'%3E%3Cpath d='M1 20v-1a7 7 0 0 1 7-7v0a7 7 0 0 1 7 7v1'/%3E%3Cpath d='M13 14v0a5 5 0 0 1 5-5v0a5 5 0 0 1 5 5v.5'/%3E%3Cpath stroke-linejoin='round' d='M8 12a4 4 0 1 0 0-8a4 4 0 0 0 0 8m10-3a3 3 0 1 0 0-6a3 3 0 0 0 0 6'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-half-moon{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M3 11.507a9.493 9.493 0 0 0 18 4.219c-8.507 0-12.726-4.22-12.726-12.726A9.49 9.49 0 0 0 3 11.507'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-hexagon-plus{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M9 12h3m3 0h-3m0 0V9m0 3v3m-.3-13.827a.6.6 0 0 1 .6 0l8.926 5.154a.6.6 0 0 1 .3.52v10.307a.6.6 0 0 1-.3.52L12.3 22.826a.6.6 0 0 1-.6 0l-8.926-5.154a.6.6 0 0 1-.3-.52V6.847a.6.6 0 0 1 .3-.52z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-key{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M10 12a4 4 0 1 1-8 0a4 4 0 0 1 8 0m0 0h12v3m-4-3v3'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-list{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M8 6h12M4 6.01l.01-.011M4 12.01l.01-.011M4 18.01l.01-.011M8 12h12M8 18h12'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-log-out{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M12 12h7m0 0l-3 3m3-3l-3-3m3-3V5a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-mail{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke='currentColor' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m7 9l5 3.5L17 9'/%3E%3Cpath d='M2 17V7a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2Z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-nav-arrow-down{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 9l6 6l6-6'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-nav-arrow-left{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m15 6l-6 6l6 6'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-nav-arrow-right{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m9 6l6 6l-6 6'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-nav-arrow-up{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 15l6-6l6 6'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-open-in-window{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M8 21h12.4a.6.6 0 0 0 .6-.6V3.6a.6.6 0 0 0-.6-.6H3.6a.6.6 0 0 0-.6.6V16m.5 4.5L12 12m0 0v4m0-4H8'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-page{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath d='M4 21.4V2.6a.6.6 0 0 1 .6-.6h11.652a.6.6 0 0 1 .424.176l3.148 3.148A.6.6 0 0 1 20 5.75V21.4a.6.6 0 0 1-.6.6H4.6a.6.6 0 0 1-.6-.6M8 10h8m-8 8h8m-8-4h4'/%3E%3Cpath d='M16 2v3.4a.6.6 0 0 0 .6.6H20'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-page-edit{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath d='M20 12V5.749a.6.6 0 0 0-.176-.425l-3.148-3.148A.6.6 0 0 0 16.252 2H4.6a.6.6 0 0 0-.6.6v18.8a.6.6 0 0 0 .6.6H11M8 10h8M8 6h4m-4 8h3m6.954 2.94l1-1a1.12 1.12 0 0 1 1.586 0v0a1.12 1.12 0 0 1 0 1.585l-1 1m-1.586-1.586l-2.991 2.991a1 1 0 0 0-.28.553l-.244 1.557l1.557-.243a1 1 0 0 0 .553-.28l2.99-2.992m-1.585-1.586l1.586 1.586'/%3E%3Cpath d='M16 2v3.4a.6.6 0 0 0 .6.6H20'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-pause{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-width='1.5' d='M6 18.4V5.6a.6.6 0 0 1 .6-.6h2.8a.6.6 0 0 1 .6.6v12.8a.6.6 0 0 1-.6.6H6.6a.6.6 0 0 1-.6-.6Zm8 0V5.6a.6.6 0 0 1 .6-.6h2.8a.6.6 0 0 1 .6.6v12.8a.6.6 0 0 1-.6.6h-2.8a.6.6 0 0 1-.6-.6Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-plus-circle{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M8 12h4m4 0h-4m0 0V8m0 4v4m0 6c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-priority-down{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M11.576 1.424a.6.6 0 0 1 .848 0l10.152 10.152a.6.6 0 0 1 0 .848L12.424 22.576a.6.6 0 0 1-.848 0L1.424 12.424a.6.6 0 0 1 0-.848zM12 16l4-4m-4 4l-4-4.167M12 16V7'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-priority-medium{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M11.576 1.424a.6.6 0 0 1 .848 0l10.152 10.152a.6.6 0 0 1 0 .848L12.424 22.576a.6.6 0 0 1-.848 0L1.424 12.424a.6.6 0 0 1 0-.848zM6 12h4m4 0h4'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-priority-up{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M11.576 1.424a.6.6 0 0 1 .848 0l10.152 10.152a.6.6 0 0 1 0 .848L12.424 22.576a.6.6 0 0 1-.848 0L1.424 12.424a.6.6 0 0 1 0-.848zM12 7l4 4m-4-4l-4 4.167M12 7v9'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-priority-up-solid{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M12.955.893a1.35 1.35 0 0 0-1.91 0L.894 11.045a1.35 1.35 0 0 0 0 1.91l10.151 10.15a1.35 1.35 0 0 0 1.91 0l10.151-10.15a1.35 1.35 0 0 0 0-1.91zM12.53 6.47a.75.75 0 0 0-1.071.01l-4 4.167a.75.75 0 1 0 1.082 1.04l2.709-2.823V16a.75.75 0 0 0 1.5 0V8.81l2.72 2.72a.75.75 0 1 0 1.06-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-profile-circle{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath d='M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10s10-4.477 10-10S17.523 2 12 2'/%3E%3Cpath d='M4.271 18.346S6.5 15.5 12 15.5s7.73 2.846 7.73 2.846M12 12a3 3 0 1 0 0-6a3 3 0 0 0 0 6'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-reply-to-message{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-width='1.5'%3E%3Cpath stroke-linejoin='round' d='m7 8l5 3l5-3'/%3E%3Cpath d='M10 20H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v6.857'/%3E%3Cpath stroke-linejoin='round' d='M13 17.111h6.3c3.6 0 3.6 4.889 0 4.889M13 17.111L16.15 14M13 17.111l3.15 3.111'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-search{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m17 17l4 4M3 11a8 8 0 1 0 16 0a8 8 0 0 0-16 0'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-settings{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath d='M12 15a3 3 0 1 0 0-6a3 3 0 0 0 0 6'/%3E%3Cpath d='m19.622 10.395l-1.097-2.65L20 6l-2-2l-1.735 1.483l-2.707-1.113L12.935 2h-1.954l-.632 2.401l-2.645 1.115L6 4L4 6l1.453 1.789l-1.08 2.657L2 11v2l2.401.656L5.516 16.3L4 18l2 2l1.791-1.46l2.606 1.072L11 22h2l.604-2.387l2.651-1.098C16.697 18.832 18 20 18 20l2-2l-1.484-1.75l1.098-2.652l2.386-.62V11z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-shield-xmark{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M9.871 14.121L11.993 12m2.121-2.121L11.993 12m0 0L9.87 9.879M11.993 12l2.121 2.121M5 18L3.13 4.913a.996.996 0 0 1 .774-1.114l7.662-1.703a2 2 0 0 1 .868 0L20.096 3.8c.51.113.848.596.774 1.114L19 18c-.07.495-.5 3.5-7 3.5S5.07 18.495 5 18'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-sparks{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linejoin='round' stroke-width='1.5' d='M8 15c4.875 0 7-2.051 7-7c0 4.949 2.11 7 7 7c-4.89 0-7 2.11-7 7c0-4.89-2.125-7-7-7ZM2 6.5c3.134 0 4.5-1.318 4.5-4.5c0 3.182 1.357 4.5 4.5 4.5c-3.143 0-4.5 1.357-4.5 4.5c0-3.143-1.366-4.5-4.5-4.5Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-sun-light{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M12 18a6 6 0 1 0 0-12a6 6 0 0 0 0 12m10-6h1M12 2V1m0 22v-1m8-2l-1-1m1-15l-1 1M4 20l1-1M4 4l1 1m-4 7h1'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-trash{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m20 9l-1.995 11.346A2 2 0 0 1 16.035 22h-8.07a2 2 0 0 1-1.97-1.654L4 9m17-3h-5.625M3 6h5.625m0 0V4a2 2 0 0 1 2-2h2.75a2 2 0 0 1 2 2v2m-6.75 0h6.75'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-user{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M5 20v-1a7 7 0 0 1 7-7v0a7 7 0 0 1 7 7v1m-7-8a4 4 0 1 0 0-8a4 4 0 0 0 0 8'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-user-plus{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M17 10h3m3 0h-3m0 0V7m0 3v3M1 20v-1a7 7 0 0 1 7-7v0a7 7 0 0 1 7 7v1m-7-8a4 4 0 1 0 0-8a4 4 0 0 0 0 8'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-user-xmark{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M18.621 12.121L20.743 10m2.121-2.121L20.743 10m0 0L18.62 7.879M20.743 10l2.121 2.121M1 20v-1a7 7 0 0 1 7-7v0a7 7 0 0 1 7 7v1m-7-8a4 4 0 1 0 0-8a4 4 0 0 0 0 8'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-xmark{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6.758 17.243L12.001 12m5.243-5.243L12 12m0 0L6.758 6.757M12.001 12l5.243 5.243'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-suppe-csv{--un-icon:url("data:image/svg+xml;utf8,%3Csvg width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M14.5 8.75c0 .69-.56 1.25-1.25 1.25H10V8.5h3v-2h-1.75c-.69 0-1.25-.56-1.25-1.25v-2c0-.69.56-1.25 1.25-1.25H14v1.5h-2.5V5h1.75c.69 0 1.25.56 1.25 1.25zm-3.384 9.925c.245.245.565.365.885.365s.64-.12.885-.365l3.145-3.145l-1.06-1.06l-2.22 2.22V11.5h-1.5v5.19l-2.22-2.22l-1.06 1.06zM19.5 17.5v1.75c0 .69-.56 1.25-1.25 1.25H5.75c-.69 0-1.25-.56-1.25-1.25V17.5H3v1.75A2.755 2.755 0 0 0 5.75 22h12.5A2.755 2.755 0 0 0 21 19.25V17.5zM5.25 10h2.5C8.44 10 9 9.44 9 8.75V7.5H7.5v1h-2v-5h2v1H9V3.25C9 2.56 8.44 2 7.75 2h-2.5C4.56 2 4 2.56 4 3.25v5.5C4 9.44 4.56 10 5.25 10m14.73-7.08L18.345 10h-1.69L15 2.75V2h1.5v.665L17.5 7l1-4.335V2H20z' clip-rule='evenodd'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-suppe-spellbook{--un-icon:url("data:image/svg+xml;utf8,%3Csvg width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M319.61 20.654c13.145 33.114 13.144 33.115-5.46 63.5c33.114-13.145 33.116-13.146 63.5 5.457c-13.145-33.114-13.146-33.113 5.457-63.498c-33.114 13.146-33.113 13.145-63.498-5.459zM113.024 38.021c-11.808 21.04-11.808 21.04-35.724 24.217c21.04 11.809 21.04 11.808 24.217 35.725c11.808-21.04 11.808-21.04 35.724-24.217c-21.04-11.808-21.04-11.808-24.217-35.725m76.55 56.184c-.952 50.588-.95 50.588-41.991 80.18c50.587.95 50.588.95 80.18 41.99c.95-50.588.95-50.588 41.99-80.18c-50.588-.95-50.588-.95-80.18-41.99zm191.177 55.885c-.046 24.127-.048 24.125-19.377 38.564c24.127.047 24.127.046 38.566 19.375c.047-24.126.046-24.125 19.375-38.564c-24.126-.047-24.125-.046-38.564-19.375m-184.086 83.88a96 96 0 0 0-3.492.134c-18.591 1.064-41.868 8.416-77.445 22.556L76.012 433.582c78.487-20.734 132.97-21.909 170.99-4.615V247.71c-18.076-8.813-31.79-13.399-46.707-13.737a91 91 0 0 0-3.629-.002zm122.686 11.42a209 209 0 0 0-8.514.098c-12.81.417-27.638 2.215-45.84 4.522v177.135c43.565-7.825 106.85-4.2 171.244 7.566l-39.78-177.197c-35.904-8.37-56.589-11.91-77.11-12.123zm2.289 16.95c18.889.204 36.852 2.768 53.707 5.02l4.437 16.523c-23.78-3.75-65.966-4.906-92.467-.98l-.636-17.805c11.959-2.154 23.625-2.88 34.959-2.758m-250.483 4.658L60.54 313.002h24.094l10.326-46.004H71.158zm345.881 0l39.742 177.031l2.239 9.973l22.591-.152l-40.855-186.852zm-78.857 57.82c16.993.026 33.67.791 49.146 2.223l3.524 17.174c-32.645-3.08-72.58-2.889-102.995 0l-.709-17.174c16.733-1.533 34.04-2.248 51.034-2.223m-281.793 6.18l-6.924 30.004h24.394l6.735-30.004H56.389zm274.418 27.244c4.656.021 9.487.085 14.716.203l2.555 17.498c-19.97-.471-47.115.56-59.728 1.05l-.7-17.985c16.803-.493 29.189-.828 43.157-.766m41.476.447c8.268.042 16.697.334 24.121.069l2.58 17.74c-8.653-.312-24.87-.83-32.064-.502l-2.807-17.234a257 257 0 0 1 8.17-.073m-326.97 20.309l-17.985 77.928l25.035-.17l17.455-77.758H45.313zm303.164 11.848c19.608-.01 38.66.774 56.449 2.572l2.996 20.787c-34.305-4.244-85.755-7.697-119.1-3.244l-.14-17.922c20.02-1.379 40.186-2.183 59.795-2.193m-166.606 44.05c-30.112.09-67.916 6.25-115.408 19.76l-7.22 2.053l187.759-1.27v-6.347c-16.236-9.206-37.42-14.278-65.13-14.196zm134.41 6.174c-19.63.067-37.112 1.439-51.283 4.182v10.064l177.594-1.203c-44.322-8.634-89.137-13.17-126.31-13.043zM26 475v18h460v-18z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
/* layer: default */
.me{margin-inline-end:calc(var(--spacing) * 4);}
.px{padding-inline:calc(var(--spacing) * 4);}
.b{border-width:1px;}
.grid{display:grid;}
.inline{display:inline;}
.block{display:block;}
.hidden{display:none;}
.visible{visibility:visible;}
.collapse{visibility:collapse;}
.resize{resize:both;}
.ring{--un-ring-shadow:var(--un-ring-inset,) 0 0 0 calc(1px + var(--un-ring-offset-width)) var(--un-ring-color, currentColor);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
.absolute{position:absolute;}
.fixed{position:fixed;}
.relative{position:relative;}
.static{position:static;}
.blur{--un-blur:blur(8px);filter:var(--un-blur,) var(--un-brightness,) var(--un-contrast,) var(--un-grayscale,) var(--un-hue-rotate,) var(--un-invert,) var(--un-saturate,) var(--un-sepia,) var(--un-drop-shadow,);}
.filter{filter:var(--un-blur,) var(--un-brightness,) var(--un-contrast,) var(--un-grayscale,) var(--un-hue-rotate,) var(--un-invert,) var(--un-saturate,) var(--un-sepia,) var(--un-drop-shadow,);}
.table{display:table;}