/* ProCut by Tisch Mobiliary — brand layer on top of app.css.
   Tisch palette: ink #141414, stone #F3F2EF, line #E4E2DD, text #4B4B4B, yellow #EDCD25, plum #4A3B46. Font: Manrope. */
:root {
  --ink: #141414; --ink-2: #5c5c5c; --side: #141414; --side-2: #232323;
  --paper: #F3F2EF; --panel: #FFFFFF; --line: #E4E2DD; --line-2: #EEECE7;
  --accent: #4A3B46; --accent-ink: #FFFFFF; --ply: #EDCD25; --ply-2: #B39709;
  --yellow: #EDCD25; --yellow-2: #D9B812; --plum: #4A3B46; --r: 12px;
  --font: 'Manrope', Helvetica, Arial, sans-serif; --font-c: 'Manrope', Helvetica, Arial, sans-serif;
  --cube: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 38'%3E%3Cpath d='M17 0l17 9.5v19L17 38 0 28.5v-19z' fill='%23EDCD25'/%3E%3Cpath d='M17 19v19L0 28.5v-19z' fill='%23C9AB10'/%3E%3Cpath d='M17 19L34 9.5v19L17 38z' fill='%23B39709'/%3E%3C/svg%3E");
  --hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104' height='180' viewBox='0 0 104 180'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M52 0L104 30V90L52 120L0 90V30Z'/%3E%3Cpath d='M52 60V120M52 60L104 30M52 60L0 30'/%3E%3Cpath d='M0 90V150L52 180M104 90V150L52 180'/%3E%3C/g%3E%3C/svg%3E");
}
body { color: #2a2a2a; letter-spacing: -.005em; }
h1, h2, h3 { font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
a { color: var(--plum); }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
::selection { background: #f7e48a; }

/* logo: the Tisch cube + PROCUT */
.ply { width: 26px; height: 29px; border-radius: 0; box-shadow: none; background: var(--cube) center / contain no-repeat; }
.ply.big { width: 48px; height: 54px; }
.wordmark { display: inline-flex; flex-direction: column; line-height: 1; }
.wm { font-weight: 400; letter-spacing: .2em; text-transform: uppercase; font-size: 1.05rem; white-space: nowrap; }
.wm b { font-weight: 800; }
.wordmark small, .by { font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; opacity: .6; margin-top: 5px; font-weight: 600; }
.brand { gap: 11px; }
.brand-logo { border-radius: 8px; }

/* sidebar & mobile bar */
.side { background: var(--side); }
.side::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .035; background-image: var(--hex); }
.side > * { position: relative; z-index: 1; }
.side-nav > a, .nav-group a { color: #d6d6d6; border-radius: 10px; }
.side-nav a.on { background: #262626; color: #fff; box-shadow: inset 3px 0 0 var(--yellow); }
.side-nav a i { color: #8d8d8d; }
.side-nav a.on i, .side-nav a:hover i { color: var(--yellow); }
.nav-group summary { color: #8d8d8d; letter-spacing: .14em; }
.avatar { background: var(--yellow); color: var(--ink); }
.lang { border-color: #3a3a3a; }
.lang a.on { background: var(--yellow); color: var(--ink); }
.auth .lang, body.doc .lang { border-color: var(--line); }
.mobile-bar { background: var(--ink); }

/* buttons, tags, inputs */
.btn { border-radius: 999px; font-weight: 700; padding-left: 16px; padding-right: 16px; }
.btn.small { padding-left: 12px; padding-right: 12px; }
.btn.primary { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.btn.primary:hover { background: var(--yellow-2); border-color: var(--yellow-2); color: var(--ink); }
.btn.primary i { color: var(--ink); }
.btn:hover { border-color: #bdb9b0; }
.tag { border-radius: 999px; }
input, select, textarea { border-radius: 10px; border-color: #d9d6cf; }
input:focus, select:focus, textarea:focus { border-color: var(--yellow-2); box-shadow: 0 0 0 4px rgba(237, 205, 37, .28); }
input[type=checkbox], input[type=radio] { accent-color: var(--ink); }

/* surfaces */
.panel, .card, .stats, .kpi, .mcard, .pcard, .card-row, .unit-card, .order-card, .guide-sec, .about-card, .chain-grid-wrap, .tday, .kit section { border-radius: 16px; }
.kpi { background: #fff; border-top: 3px solid var(--ink); }
.kpi > span i, .card h3 i, .sec i, .tabs button i, .tabs a i { color: var(--ply-2); }
.card-ico, .unit-ico { background: #fbf3cc; color: var(--ink); }
.top h1 i { color: var(--ply-2); }
.tabs button[aria-selected="true"], .tabs a.on { border-bottom-color: var(--yellow); }
.chip.on, .wz-steps li.on { background: var(--ink); }
.paid-banner { border-radius: 16px; }

/* charts in brand colours */
.ch-bar.s1, .sw.s1 { fill: var(--ink); background: var(--ink); }
.ch-bar.s3, .sw.s3 { fill: var(--yellow); background: var(--yellow); }
.ch-bar.s4, .sw.s4 { fill: var(--plum); background: var(--plum); }
.ch-line.s1, .spark.s1 polyline { stroke: var(--ink); } .ch-dot.s1 { fill: var(--ink); }
.ch-line.s4 { stroke: var(--plum); } .ch-dot.s4 { fill: var(--plum); }

/* sign-in screens in the Tisch hero style */
.auth-side { background: var(--ink); color: rgba(255, 255, 255, .78); }
.auth-side::before { opacity: .06; background-image: var(--hex); background-size: auto; }
.as-brand { color: #fff; text-decoration: none; font-size: 1.2rem; }
.as-brand .ply { width: 34px; height: 38px; }
.as-copy h2 { color: #fff; font-weight: 800; letter-spacing: -.03em; }
.as-copy h2 em { font-style: normal; color: var(--yellow); }
.as-copy p { color: rgba(255, 255, 255, .7); }
.as-copy li { color: rgba(255, 255, 255, .85); }
.as-copy li span { background: rgba(237, 205, 37, .14); color: var(--yellow); border-radius: 12px; }
.as-art g[stroke] { stroke: rgba(237, 205, 37, .5); }
.as-art g[fill="#e9d6b0"] { fill: var(--yellow); }
.as-foot { color: rgba(255, 255, 255, .45); }
.as-foot a { color: rgba(255, 255, 255, .7); }
.auth-title { font-weight: 800; letter-spacing: -.03em; }
.auth .in-ico input, .auth-card form > label:not(.check) > input { border-radius: 999px; }
.auth-roles { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.auth-roles span { font-size: .78rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink-2); }
.auth-roles span i { color: var(--ply-2); }
.back-site { display: inline-flex; gap: 6px; align-items: center; font-size: .88rem; color: var(--ink-2); text-decoration: none; margin-top: 10px; }
.back-site:hover { color: var(--ink); }

/* documents */
.about-brand b.wm { font-size: 1.8rem; display: block; }
.guide-cover h1.wm { font-size: 3rem; letter-spacing: .2em; }
.guide-cover .by { font-size: .8rem; }
.doc-bar .btn.primary { color: var(--ink); }
.side { border-right: 0 !important; border-image: none !important; }