:root {
  --navy-950: #071a2d;
  --navy-900: #0b2239;
  --navy-800: #12304c;
  --teal-700: #087d76;
  --teal-600: #0b968c;
  --teal-500: #12a99d;
  --teal-100: #dff7f3;
  --teal-50: #effbf9;
  --ink: #142333;
  --muted: #687889;
  --line: #e4eaee;
  --surface: #ffffff;
  --canvas: #f5f7f8;
  --danger: #d64d57;
  --danger-bg: #fff1f2;
  --amber: #c77a13;
  --amber-bg: #fff7e8;
  --shadow-sm: 0 1px 2px rgba(7, 26, 45, 0.05), 0 4px 14px rgba(7, 26, 45, 0.04);
  --shadow-lg: 0 18px 48px rgba(7, 26, 45, 0.15);
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea, select { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.centered { text-align: center; }

[data-icon] { display: inline-flex; align-items: center; justify-content: center; }
[data-icon] svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-family: "Manrope", sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.6px;
  text-decoration: none;
}

.brand-light { color: #fff; }
.brand-mark { width: 35px; height: 35px; border-radius: 11px; color: white; background: var(--teal-500); box-shadow: 0 6px 18px rgba(18, 169, 157, 0.25); }
.brand-mark svg { width: 22px; height: 22px; stroke-width: 2.1; }

/* Login */
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, 46%) 1fr; background: white; }
.login-story { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 100vh; padding: 42px 56px 36px; color: white; background: linear-gradient(145deg, #071a2d 0%, #0b2940 63%, #0c4d56 125%); }
.login-story::before { content: ""; position: absolute; width: 570px; height: 570px; right: -280px; top: -180px; border-radius: 50%; border: 1px solid rgba(113, 223, 211, .12); box-shadow: 0 0 0 80px rgba(113,223,211,.025), 0 0 0 160px rgba(113,223,211,.02); }
.login-story::after { content: ""; position: absolute; left: -110px; bottom: 65px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(19,169,157,.16), transparent 68%); }
.story-copy { position: relative; z-index: 1; margin: auto 0 58px; max-width: 570px; }
.story-badge { width: fit-content; display: flex; align-items: center; gap: 8px; padding: 7px 11px; border: 1px solid rgba(154,235,227,.18); border-radius: 99px; background: rgba(10,128,121,.18); color: #bbf0e9; font-size: 12px; font-weight: 600; letter-spacing: .25px; }
.story-badge span { width: 7px; height: 7px; border-radius: 50%; background: #5ce0d2; box-shadow: 0 0 0 4px rgba(92,224,210,.1); }
.story-copy h1 { margin: 24px 0 20px; font-family: "Manrope", sans-serif; font-size: clamp(38px, 4vw, 56px); line-height: 1.08; letter-spacing: -2.1px; }
.story-copy > p { max-width: 520px; color: #aebdca; font-size: 17px; line-height: 1.65; }
.security-points { position: relative; z-index: 1; display: grid; gap: 22px; margin-bottom: 52px; }
.security-points > div { display: flex; align-items: center; gap: 15px; }
.security-points > div > [data-icon] { flex: 0 0 39px; height: 39px; border-radius: 11px; color: #71ddd2; background: rgba(35,178,165,.12); border: 1px solid rgba(92,224,210,.1); }
.security-points p { display: grid; gap: 3px; margin: 0; }
.security-points strong { font-size: 14px; font-weight: 600; }
.security-points small { color: #8fa1b1; font-size: 12px; }
.story-footer { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; color: #718799; font-size: 10px; text-transform: uppercase; letter-spacing: .8px; }
.story-footer i { width: 3px; height: 3px; border-radius: 50%; background: #3c596d; }
.login-panel { display: flex; align-items: center; justify-content: center; padding: 50px; background: #fbfcfc; }
.auth-card { width: min(430px, 100%); }
.auth-card .eyebrow { margin-bottom: 11px; color: var(--teal-700); font-size: 11px; font-weight: 700; letter-spacing: 1.6px; }
.auth-card h2 { margin: 0 0 9px; font-family: "Manrope", sans-serif; font-size: 31px; letter-spacing: -1px; }
.auth-card > p { margin: 0 0 28px; font-size: 14px; }
.prototype-note { display: flex; align-items: flex-start; gap: 11px; margin: 25px 0 26px; padding: 12px 14px; color: #72520d; border: 1px solid #f2deb2; border-radius: 11px; background: var(--amber-bg); }
.prototype-note > [data-icon] { margin-top: 2px; }
.prototype-note p { display: grid; gap: 2px; margin: 0; }
.prototype-note strong { font-size: 12px; }
.prototype-note small { font-size: 11px; line-height: 1.45; }
.field-label { display: flex; justify-content: space-between; margin: 18px 0 8px; font-size: 12px; font-weight: 600; }
.link-button { padding: 0; border: 0; color: var(--teal-700); background: none; font-size: inherit; font-weight: 600; cursor: pointer; }
.input-wrap { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 13px; color: #8492a0; border: 1px solid #dce3e8; border-radius: 10px; background: white; transition: border-color .2s, box-shadow .2s; }
.input-wrap:focus-within { border-color: var(--teal-500); box-shadow: 0 0 0 3px rgba(18,169,157,.1); }
.input-wrap input { width: 100%; height: 100%; padding: 0; color: var(--ink); border: 0; outline: 0; background: transparent; font-size: 13px; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; padding: 0; color: #6f7f8d; border: 0; background: transparent; cursor: pointer; }
.check-row { display: flex; align-items: center; gap: 8px; margin: 17px 0 24px; color: #60717f; font-size: 12px; cursor: pointer; }
.check-row input { accent-color: var(--teal-600); }
.primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 47px; padding: 0 18px; color: white; border: 0; border-radius: 10px; background: var(--teal-700); box-shadow: 0 8px 20px rgba(8,125,118,.16); font-size: 13px; font-weight: 600; cursor: pointer; transition: transform .15s, background .15s; }
.primary-button:hover { background: #066e68; transform: translateY(-1px); }
.primary-button:active { transform: translateY(0); }
.primary-button.wide { width: 100%; }
.primary-button.compact { height: 38px; padding: 0 14px; border-radius: 8px; box-shadow: none; }
.auth-help { margin-top: 26px !important; text-align: center; color: #81909d; font-size: 11px !important; }
.mobile-brand { display: none; }
.back-button { display: flex; align-items: center; gap: 6px; margin-bottom: 30px; padding: 0; color: #6e7c89; border: 0; background: none; font-size: 12px; cursor: pointer; }
.mfa-illustration { position: relative; display: flex; align-items: center; justify-content: center; width: 78px; height: 78px; margin: 0 auto 24px; color: var(--teal-700); border-radius: 24px; background: var(--teal-50); }
.mfa-illustration > [data-icon] svg { width: 37px; height: 37px; }
.mfa-illustration i { position: absolute; right: -5px; bottom: -4px; width: 31px; height: 31px; color: white; border: 4px solid #fbfcfc; border-radius: 50%; background: var(--teal-600); }
.mfa-illustration i svg { width: 16px; height: 16px; }
.otp-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 30px 0; }
.otp-row > span { width: 8px; height: 1px; margin: 0 2px; background: #aab6bf; }
.otp { width: 46px; height: 53px; text-align: center; border: 1px solid #d8e1e6; border-radius: 9px; outline: none; background: white; font-size: 21px; font-weight: 700; }
.otp:focus { border-color: var(--teal-500); box-shadow: 0 0 0 3px rgba(18,169,157,.1); }

/* Application shell */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 244px minmax(0, 1fr); }
.sidebar { position: fixed; z-index: 20; inset: 0 auto 0 0; display: flex; flex-direction: column; width: 244px; padding: 25px 17px 17px; color: #c2ced8; background: var(--navy-950); }
.sidebar .brand { margin: 0 10px 28px; color: white; }
.workspace-switcher { display: grid; grid-template-columns: 34px 1fr 20px; align-items: center; gap: 9px; margin-bottom: 24px; padding: 10px; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; background: rgba(255,255,255,.035); }
.workspace-avatar { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; color: #baf0e9; border-radius: 8px; background: #154b55; font-size: 10px; font-weight: 700; }
.workspace-switcher > span:nth-child(2) { display: grid; gap: 2px; }
.workspace-switcher small { color: #62798b; font-size: 8px; font-weight: 700; letter-spacing: .7px; }
.workspace-switcher strong { color: #e6edf2; font-size: 11px; font-weight: 600; }
.workspace-switcher button { color: #60798c; }
#main-nav { display: flex; flex-direction: column; gap: 3px; }
.nav-item { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 9px; width: 100%; height: 41px; padding: 0 10px; color: #8da0af; border: 0; border-radius: 8px; background: transparent; text-align: left; cursor: pointer; }
.nav-item:hover { color: #dce6ed; background: rgba(255,255,255,.035); }
.nav-item.active { color: white; background: rgba(19,169,157,.15); }
.nav-item.active [data-icon] { color: #65d5ca; }
.nav-item b { font-size: 12px; font-weight: 500; }
.nav-item em { min-width: 22px; padding: 2px 6px; color: #728798; border-radius: 10px; background: rgba(255,255,255,.045); font-size: 9px; font-style: normal; text-align: center; }
.nav-label { margin: 27px 10px 7px; color: #536b7c; font-size: 8px; font-weight: 700; letter-spacing: 1.1px; }
.sidebar-security { display: grid; grid-template-columns: 30px 1fr 6px; align-items: center; gap: 9px; margin-top: auto; padding: 11px; border: 1px solid rgba(47,210,194,.1); border-radius: 9px; background: rgba(10,128,121,.08); }
.sidebar-security > [data-icon] { width: 30px; height: 30px; color: #5cdace; border-radius: 8px; background: rgba(19,169,157,.12); }
.sidebar-security p { display: grid; gap: 2px; margin: 0; }
.sidebar-security strong { color: #bcd0da; font-size: 9px; font-weight: 600; }
.sidebar-security small { color: #61798a; font-size: 8px; }
.sidebar-security i { width: 6px; height: 6px; border-radius: 50%; background: #35cbbb; box-shadow: 0 0 0 3px rgba(53,203,187,.08); }
.profile-row { display: grid; grid-template-columns: 34px 1fr 20px; align-items: center; gap: 9px; width: 100%; margin-top: 14px; padding: 12px 7px 2px; color: #7d91a0; border: 0; border-top: 1px solid rgba(255,255,255,.055); background: transparent; text-align: left; cursor: pointer; }
.profile-avatar { position: relative; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; color: #d9ecea; border-radius: 50%; background: #284354; font-size: 10px; font-weight: 700; }
.profile-avatar i { position: absolute; right: 0; bottom: 0; width: 8px; height: 8px; border: 2px solid var(--navy-950); border-radius: 50%; background: #30c48d; }
.profile-row > span:nth-child(2) { display: grid; gap: 2px; }
.profile-row strong { color: #d6e0e7; font-size: 10px; font-weight: 600; }
.profile-row small { font-size: 9px; }
.main-content { min-width: 0; grid-column: 2; }
.topbar { position: sticky; z-index: 10; top: 0; display: flex; align-items: center; justify-content: space-between; height: 66px; padding: 0 31px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); backdrop-filter: blur(12px); }
#breadcrumb { display: flex; align-items: center; gap: 9px; font-size: 11px; }
#breadcrumb span, #breadcrumb i { color: #a0abb4; font-style: normal; }
#breadcrumb strong { font-weight: 600; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.search-trigger { display: flex; align-items: center; gap: 8px; width: 190px; height: 36px; padding: 0 10px; color: #83909b; border: 1px solid var(--line); border-radius: 8px; background: #fafbfb; font-size: 10px; cursor: pointer; }
.search-trigger > span:nth-child(2) { flex: 1; text-align: left; }
kbd { padding: 2px 5px; color: #8b99a3; border: 1px solid #dde3e7; border-radius: 4px; background: white; font-family: inherit; font-size: 8px; }
.topbar .icon-button { position: relative; width: 35px; height: 35px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.notification i { position: absolute; right: 8px; top: 7px; width: 5px; height: 5px; border: 1px solid white; border-radius: 50%; background: #ee5f68; }
.page-content { max-width: 1500px; margin: 0 auto; padding: 29px 31px 45px; }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.page-header h1 { margin: 0 0 5px; font-family: "Manrope", sans-serif; font-size: 23px; letter-spacing: -.65px; }
.page-header p { margin: 0; color: var(--muted); font-size: 11px; }
.header-actions { display: flex; gap: 9px; }
.secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 13px; color: #536572; border: 1px solid #dfe6ea; border-radius: 8px; background: white; font-size: 11px; font-weight: 600; cursor: pointer; }
.secondary-button:hover { border-color: #c8d5dc; background: #fbfcfc; }
.mobile-topbar { display: none; }

/* Dashboard */
.trial-banner { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; padding: 11px 14px; color: #72520d; border: 1px solid #f0dcae; border-radius: 10px; background: #fffaf0; font-size: 10px; }
.trial-banner > [data-icon] { color: var(--amber); }
.trial-banner p { flex: 1; margin: 0; }
.trial-banner strong { font-weight: 700; }
.trial-banner button { color: #856118; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat-card { position: relative; overflow: hidden; min-height: 118px; padding: 18px; border: 1px solid var(--line); border-radius: 11px; background: white; box-shadow: var(--shadow-sm); }
.stat-card > [data-icon] { position: absolute; right: 17px; top: 17px; width: 31px; height: 31px; color: var(--teal-700); border-radius: 9px; background: var(--teal-50); }
.stat-card > small { display: block; margin-bottom: 11px; color: #748592; font-size: 10px; font-weight: 500; }
.stat-value { display: flex; align-items: baseline; gap: 9px; }
.stat-value strong { font-family: "Manrope", sans-serif; font-size: 25px; letter-spacing: -.8px; }
.stat-value em { color: #1c9a70; font-size: 9px; font-style: normal; }
.stat-card > p { margin: 7px 0 0; color: #9aa6af; font-size: 9px; }
.stat-card.warning > [data-icon] { color: var(--amber); background: var(--amber-bg); }
.stat-card.warning .stat-value em { color: var(--amber); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .8fr); gap: 18px; }
.panel { border: 1px solid var(--line); border-radius: 11px; background: white; box-shadow: var(--shadow-sm); }
.panel-header { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 18px; border-bottom: 1px solid #edf1f3; }
.panel-header h2 { margin: 0; font-family: "Manrope", sans-serif; font-size: 13px; }
.panel-header p { margin: 3px 0 0; color: #8a98a3; font-size: 9px; }
.text-button { display: inline-flex; align-items: center; gap: 5px; padding: 0; color: var(--teal-700); border: 0; background: none; font-size: 10px; font-weight: 600; cursor: pointer; }
.customer-row { display: grid; grid-template-columns: 38px minmax(130px, 1.15fr) minmax(95px, .8fr) minmax(95px, .8fr) 85px 28px; align-items: center; gap: 11px; min-height: 67px; padding: 0 17px; border-bottom: 1px solid #f0f3f5; cursor: pointer; }
.customer-row:hover { background: #fbfcfc; }
.customer-row:last-child { border-bottom: 0; }
.company-logo { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9px; font-size: 10px; font-weight: 700; }
.company-main, .data-cell { min-width: 0; display: grid; gap: 3px; }
.company-main strong, .data-cell strong { overflow: hidden; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.company-main small, .data-cell small { overflow: hidden; color: #8c9aa4; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.status-pill { width: fit-content; padding: 4px 8px; color: #237e64; border-radius: 99px; background: #eaf8f3; font-size: 8px; font-weight: 600; }
.status-pill.warning { color: #a96a14; background: #fff4df; }
.avatar-stack { display: flex; }
.avatar-stack span { display: flex; align-items: center; justify-content: center; width: 23px; height: 23px; margin-right: -5px; color: #334d5e; border: 2px solid white; border-radius: 50%; background: #dae8ec; font-size: 7px; font-weight: 700; }
.activity-list { padding: 5px 17px 8px; }
.activity-item { position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 12px 0; }
.activity-item:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 42px; bottom: -5px; width: 1px; background: #e6ecef; }
.activity-icon { z-index: 1; display: flex; align-items: center; justify-content: center; width: 29px; height: 29px; color: var(--teal-700); border-radius: 50%; background: var(--teal-50); }
.activity-icon svg { width: 14px; height: 14px; }
.activity-item p { margin: 1px 0 0; color: #526571; font-size: 9px; line-height: 1.45; }
.activity-item p strong { color: var(--ink); font-weight: 600; }
.activity-item small { display: block; margin-top: 5px; color: #9ba7af; font-size: 8px; }
.security-score { margin-top: 18px; padding: 17px; border: 1px solid #cfeae6; border-radius: 11px; background: linear-gradient(110deg, #f3fbfa, #f9fdfc); }
.score-top { display: flex; align-items: center; gap: 12px; }
.score-circle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--teal-700); border-radius: 50%; background: conic-gradient(var(--teal-500) 94%, #d7ece9 0); }
.score-circle span { display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; border-radius: 50%; background: white; font-size: 10px; font-weight: 700; }
.score-top p { display: grid; gap: 3px; margin: 0; }
.score-top strong { font-size: 11px; }
.score-top small { color: #638078; font-size: 8px; }
.score-bar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; margin-top: 13px; color: #648077; font-size: 8px; }
.score-bar i { grid-column: 1; height: 4px; overflow: hidden; border-radius: 4px; background: #dbeeea; }
.score-bar i::after { content: ""; display: block; width: 94%; height: 100%; border-radius: 4px; background: var(--teal-500); }

/* Tables and pages */
.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.toolbar-search { display: flex; align-items: center; gap: 8px; width: min(330px, 100%); height: 39px; padding: 0 12px; color: #87949e; border: 1px solid var(--line); border-radius: 8px; background: white; }
.toolbar-search input { width: 100%; border: 0; outline: 0; background: transparent; font-size: 10px; }
.toolbar-spacer { flex: 1; }
.data-table { overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: white; box-shadow: var(--shadow-sm); }
.table-head, .table-row { display: grid; align-items: center; gap: 12px; padding: 0 17px; }
.customer-table .table-head, .customer-table .table-row { grid-template-columns: minmax(180px, 1.3fr) minmax(130px, 1fr) 110px 100px 100px 28px; }
.vault-table .table-head, .vault-table .table-row { grid-template-columns: minmax(165px, 1.2fr) minmax(130px, 1fr) minmax(135px, 1fr) 100px 84px 68px; }
.table-head { min-height: 40px; color: #8b98a2; border-bottom: 1px solid var(--line); background: #fafbfb; font-size: 8px; font-weight: 700; letter-spacing: .35px; text-transform: uppercase; }
.table-row { min-height: 62px; border-bottom: 1px solid #edf1f3; font-size: 10px; cursor: pointer; }
.table-row:last-child { border: 0; }
.table-row:hover { background: #fbfcfc; }
.table-company { display: flex; align-items: center; gap: 10px; min-width: 0; }
.table-company .company-logo { flex: 0 0 34px; width: 34px; height: 34px; }
.cell-stack { min-width: 0; display: grid; gap: 3px; }
.cell-stack strong, .cell-stack span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-stack strong { font-size: 10px; font-weight: 600; }
.cell-stack small { color: #8d99a3; font-size: 8px; }
.secret-dots { color: #71818d; font-family: monospace; letter-spacing: 1.2px; }
.copy-button, .more-button { display: inline-flex; align-items: center; justify-content: center; height: 30px; color: #6d7d89; border: 1px solid #e2e8eb; border-radius: 7px; background: white; font-size: 9px; cursor: pointer; }
.copy-button { gap: 5px; padding: 0 9px; }
.more-button { width: 28px; border: 0; background: transparent; }
.tag { width: fit-content; padding: 4px 7px; color: #566b78; border-radius: 5px; background: #eff3f5; font-size: 8px; font-weight: 600; }
.empty-state { padding: 55px 20px; text-align: center; }
.empty-state > [data-icon] { width: 50px; height: 50px; margin-bottom: 13px; color: #91a2ad; border-radius: 14px; background: #f0f4f5; }
.empty-state h3 { margin: 0 0 7px; font-size: 14px; }
.empty-state p { margin: 0; color: #84939e; font-size: 10px; }

/* Dynamic customer workspace */
.page-back { margin: 0 0 14px; }
.customer-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; padding: 21px; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: var(--shadow-sm); }
.customer-identity { display: flex; align-items: center; gap: 14px; }
.customer-identity .company-logo { width: 52px; height: 52px; border-radius: 14px; font-size: 14px; }
.customer-title-line { display: flex; align-items: center; gap: 10px; }
.customer-title-line h1 { margin: 0; font-family: "Manrope", sans-serif; font-size: 22px; letter-spacing: -.6px; }
.customer-identity p { margin: 5px 0 0; color: #80909b; font-size: 10px; }
.customer-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 25px; }
.summary-box { min-width: 0; min-height: 94px; overflow: hidden; padding: 15px 16px; border: 1px solid var(--line); border-radius: 10px; background: white; box-shadow: var(--shadow-sm); }
.summary-box > small { display: block; margin-bottom: 7px; color: #84939e; font-size: 8px; font-weight: 700; letter-spacing: .5px; }
.summary-box > strong { display: block; margin-bottom: 5px; font-family: "Manrope", sans-serif; font-size: 21px; }
.summary-box > span:last-child { display: block; overflow: hidden; color: #84939e; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.summary-box .avatar-stack { margin: 3px 0 8px; }
.customer-record-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.customer-record-toolbar h2 { margin: 0 0 4px; font-family: "Manrope", sans-serif; font-size: 15px; }
.customer-record-toolbar p { margin: 0; color: #87949e; font-size: 9px; }
.tech-record-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px; }
.tech-record-card { overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: white; box-shadow: var(--shadow-sm); }
.record-head { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 11px; min-height: 67px; padding: 13px 15px; border-bottom: 1px solid #edf1f3; }
.record-category-icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; }
.record-category-icon svg { width: 18px; height: 18px; }
.record-category { display: block; margin-bottom: 3px; color: #7c8c97; font-size: 8px; font-weight: 600; }
.record-head h3 { margin: 0; font-size: 11px; font-weight: 700; }
.record-actions { display: flex; gap: 2px; }
.record-actions .more-button { border: 1px solid transparent; }
.record-actions .more-button:hover { border-color: var(--line); background: #f8fafb; }
.record-actions .danger-icon:hover { color: var(--danger); background: var(--danger-bg); }
.record-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 3px 15px 8px; }
.record-field { min-width: 0; padding: 11px 7px 10px 0; border-bottom: 1px solid #f0f3f5; }
.record-field:nth-last-child(-n+2) { border-bottom: 0; }
.record-field small { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; color: #8a98a2; font-size: 8px; }
.record-field small [data-icon] svg { width: 10px; height: 10px; }
.record-value { display: flex; align-items: center; gap: 7px; min-height: 20px; overflow: hidden; color: #283b48; font-size: 10px; font-weight: 500; }
.record-value > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-secret { color: #657783; font-family: monospace; letter-spacing: 1px; }
.record-empty { color: #a0aab1; font-style: italic; font-weight: 400; }
.record-link { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; overflow: hidden; color: var(--teal-700); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.record-link [data-icon] svg { width: 11px; height: 11px; }
.record-reveal { display: inline-flex; flex: 0 0 24px; align-items: center; justify-content: center; width: 24px; height: 22px; padding: 0; color: #6e7f8b; border: 1px solid #e0e7ea; border-radius: 6px; background: white; cursor: pointer; }
.record-reveal svg { width: 13px; height: 13px; }
.record-note { display: flex; gap: 6px; margin: 0 15px 10px; padding: 9px 10px; color: #60737f; border-radius: 7px; background: #f5f8f8; font-size: 8px; line-height: 1.5; }
.record-note [data-icon] { flex: 0 0 14px; }
.record-note svg { width: 12px; height: 12px; }
.record-footer { display: flex; justify-content: space-between; padding: 9px 15px; color: #98a3ab; border-top: 1px solid #edf1f3; background: #fafbfb; font-size: 7px; }
.full-span { grid-column: 1 / -1; }

.field-builder { display: grid; gap: 8px; }
.field-builder-head { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.field-builder-head strong { font-size: 10px; }
.field-builder-head small { color: #8b99a3; font-size: 8px; }
.field-editor-row { display: grid; grid-template-columns: minmax(110px, .8fr) 105px minmax(150px, 1.2fr) 58px 30px; align-items: center; gap: 7px; padding: 8px; border: 1px solid #e4eaed; border-radius: 9px; background: #fbfcfc; }
.field-editor-row input, .field-editor-row select { width: 100%; height: 35px; min-width: 0; padding: 0 8px; color: var(--ink); border: 1px solid #dce4e8; border-radius: 7px; outline: none; background: white; font-size: 9px; }
.field-editor-row input:focus, .field-editor-row select:focus { border-color: var(--teal-500); box-shadow: 0 0 0 2px rgba(18,169,157,.08); }
.secret-check { display: grid; justify-items: center; gap: 3px; color: #7c8b95; font-size: 7px; cursor: pointer; }
.secret-check input { width: 14px; height: 14px; accent-color: var(--teal-600); }
.field-remove { width: 30px; height: 30px; color: #8b99a3; border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.field-remove:hover { color: var(--danger); background: var(--danger-bg); }
.field-remove svg { width: 15px; height: 15px; }
.custom-category-field.hidden-field { display: none; }

/* Activity/team/settings */
.filter-tabs { display: flex; gap: 3px; width: fit-content; margin-bottom: 16px; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: white; }
.filter-tabs button { height: 30px; padding: 0 12px; color: #71808c; border: 0; border-radius: 6px; background: transparent; font-size: 9px; cursor: pointer; }
.filter-tabs button.active { color: var(--teal-700); background: var(--teal-50); font-weight: 600; }
.timeline-panel { padding: 5px 20px; }
.timeline-row { display: grid; grid-template-columns: 95px 34px minmax(0, 1fr) auto; align-items: center; gap: 13px; min-height: 69px; border-bottom: 1px solid #edf1f3; }
.timeline-row:last-child { border: 0; }
.timeline-time { color: #94a0a9; font-size: 8px; }
.timeline-time strong { display: block; margin-bottom: 3px; color: #5d6f7c; font-size: 9px; }
.timeline-row .activity-icon { width: 32px; height: 32px; }
.timeline-copy { font-size: 10px; }
.timeline-copy strong { font-weight: 600; }
.timeline-copy small { display: block; margin-top: 4px; color: #8e9ba5; font-size: 8px; }
.timeline-ip { color: #8c9aa4; font-family: monospace; font-size: 8px; }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.member-card { padding: 18px; border: 1px solid var(--line); border-radius: 11px; background: white; box-shadow: var(--shadow-sm); }
.member-top { display: flex; align-items: center; gap: 11px; }
.member-avatar { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: #1f5860; border-radius: 50%; background: #dcefee; font-size: 11px; font-weight: 700; }
.member-top p { display: grid; gap: 3px; margin: 0; }
.member-top strong { font-size: 11px; }
.member-top small { color: #8a98a3; font-size: 8px; }
.role-line { display: flex; align-items: center; justify-content: space-between; margin-top: 17px; padding-top: 13px; border-top: 1px solid #edf1f3; }
.role-line small { color: #8b99a3; font-size: 8px; }
.mfa-state { display: flex; align-items: center; gap: 5px; color: #20866a; font-size: 8px; font-weight: 600; }
.mfa-state i { width: 6px; height: 6px; border-radius: 50%; background: #2aba8e; }
.settings-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 18px; }
.settings-nav { height: fit-content; padding: 7px; border: 1px solid var(--line); border-radius: 11px; background: white; }
.settings-nav button { width: 100%; height: 37px; padding: 0 10px; color: #667783; border: 0; border-radius: 7px; background: transparent; text-align: left; font-size: 10px; cursor: pointer; }
.settings-nav button.active { color: var(--teal-700); background: var(--teal-50); font-weight: 600; }
.settings-card { padding: 21px; border: 1px solid var(--line); border-radius: 11px; background: white; }
.settings-card h2 { margin: 0 0 5px; font-family: "Manrope", sans-serif; font-size: 14px; }
.settings-card > p { margin: 0 0 20px; color: #84929d; font-size: 9px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 65px; border-top: 1px solid #edf1f3; }
.setting-row p { display: grid; gap: 3px; margin: 0; }
.setting-row strong { font-size: 10px; }
.setting-row small { color: #8b98a2; font-size: 8px; }
.switch { position: relative; width: 34px; height: 19px; border: 0; border-radius: 99px; background: #ccd6dc; cursor: pointer; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 13px; height: 13px; border-radius: 50%; background: white; transition: .2s; }
.switch.on { background: var(--teal-600); }
.switch.on::after { transform: translateX(15px); }

/* Modal */
.modal-backdrop { position: fixed; z-index: 100; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(4,18,31,.55); backdrop-filter: blur(3px); animation: fadeIn .15s ease; }
.modal { width: min(540px, 100%); max-height: calc(100vh - 40px); overflow: auto; border-radius: 14px; background: white; box-shadow: var(--shadow-lg); animation: riseIn .2s ease; }
.modal.wide { width: min(760px, 100%); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 20px 21px 16px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0 0 4px; font-family: "Manrope", sans-serif; font-size: 17px; }
.modal-head p { margin: 0; color: #84929c; font-size: 9px; }
.close-button { width: 31px; height: 31px; border: 1px solid var(--line); border-radius: 8px; background: white; cursor: pointer; }
.modal-body { padding: 19px 21px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 9px; padding: 14px 21px; border-top: 1px solid var(--line); background: #fafbfb; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group { display: grid; gap: 7px; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { font-size: 9px; font-weight: 600; }
.form-group input, .form-group select, .form-group textarea { width: 100%; min-height: 40px; padding: 9px 11px; color: var(--ink); border: 1px solid #dce4e8; border-radius: 8px; outline: 0; background: white; font-size: 10px; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--teal-500); box-shadow: 0 0 0 3px rgba(18,169,157,.09); }
.form-group textarea { min-height: 78px; resize: vertical; }
.form-hint { color: #8b99a3; font-size: 8px; line-height: 1.45; }
.customer-detail-head { display: flex; align-items: center; gap: 13px; margin-bottom: 19px; }
.customer-detail-head .company-logo { width: 48px; height: 48px; border-radius: 12px; font-size: 13px; }
.customer-detail-head h3 { margin: 0 0 4px; font-size: 15px; }
.customer-detail-head p { margin: 0; color: #82919c; font-size: 9px; }
.detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.detail-box { padding: 12px; border: 1px solid #e5eaed; border-radius: 9px; background: #fbfcfc; }
.detail-box small { display: block; margin-bottom: 5px; color: #8997a1; font-size: 8px; }
.detail-box strong { font-size: 10px; font-weight: 600; }
.detail-section-title { margin: 21px 0 9px; font-size: 10px; font-weight: 700; }
.detail-secret { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 11px; padding: 11px 12px; border: 1px solid #e4eaed; border-radius: 9px; }

/* Search & toasts */
.command-modal { align-self: flex-start; width: min(600px, 100%); margin-top: 10vh; overflow: hidden; border-radius: 13px; background: white; box-shadow: var(--shadow-lg); }
.command-input { display: flex; align-items: center; gap: 10px; height: 55px; padding: 0 17px; border-bottom: 1px solid var(--line); }
.command-input input { flex: 1; height: 100%; border: 0; outline: 0; font-size: 12px; }
.command-results { max-height: 340px; overflow: auto; padding: 8px; }
.command-label { padding: 8px 9px 5px; color: #98a3ab; font-size: 8px; font-weight: 700; letter-spacing: .5px; }
.command-result { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 10px; width: 100%; min-height: 47px; padding: 0 10px; border: 0; border-radius: 8px; background: white; text-align: left; cursor: pointer; }
.command-result:hover { background: #f3f8f7; }
.command-result > [data-icon] { width: 31px; height: 31px; color: var(--teal-700); border-radius: 8px; background: var(--teal-50); }
.command-result span:nth-child(2) { display: grid; gap: 2px; }
.command-result strong { font-size: 10px; }
.command-result small { color: #8c99a3; font-size: 8px; }
.command-result em { color: #9aa5ad; font-size: 8px; font-style: normal; }
.toast-root { position: fixed; z-index: 200; right: 22px; bottom: 22px; display: grid; gap: 8px; }
.toast { display: flex; align-items: center; gap: 10px; min-width: 280px; padding: 12px 14px; color: white; border-radius: 10px; background: var(--navy-900); box-shadow: var(--shadow-lg); font-size: 10px; animation: riseIn .2s ease; }
.toast > [data-icon] { color: #5ce0d2; }

@keyframes fadeIn { from { opacity: 0; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 1050px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .customer-table .table-head, .customer-table .table-row { grid-template-columns: minmax(160px, 1.3fr) minmax(120px, 1fr) 90px 80px 28px; }
  .customer-table .table-head > :nth-child(5), .customer-table .table-row > :nth-child(5) { display: none; }
  .vault-table .table-head, .vault-table .table-row { grid-template-columns: minmax(150px, 1.2fr) minmax(120px, 1fr) minmax(120px, 1fr) 80px 65px; }
  .vault-table .table-head > :nth-child(5), .vault-table .table-row > :nth-child(5) { display: none; }
  .customer-summary-grid { grid-template-columns: repeat(2, 1fr); }
  .tech-record-grid { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
  .login-shell { display: block; background: #fbfcfc; }
  .login-story { display: none; }
  .login-panel { min-height: 100vh; padding: 28px 22px; }
  .mobile-brand { display: flex; position: absolute; left: 22px; top: 25px; align-items: center; gap: 9px; font-family: "Manrope", sans-serif; }
  .auth-card { margin-top: 55px; }
  .app-shell { display: block; padding-top: 57px; }
  .sidebar { transform: translateX(-100%); transition: transform .25s ease; }
  .sidebar.open { transform: translateX(0); box-shadow: 20px 0 45px rgba(7,26,45,.25); }
  .main-content { grid-column: auto; }
  .mobile-topbar { position: fixed; z-index: 15; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; height: 57px; padding: 0 18px; border-bottom: 1px solid var(--line); background: white; }
  .mobile-topbar .brand { font-size: 18px; }
  .mobile-topbar .brand-mark { width: 30px; height: 30px; }
  .mobile-topbar .icon-button { width: 36px; height: 36px; }
  .topbar { height: 57px; padding: 0 18px; }
  #breadcrumb { display: none; }
  .topbar-actions { width: 100%; justify-content: flex-end; }
  .search-trigger { flex: 1; max-width: 320px; }
  .page-content { padding: 22px 18px 38px; }
  .customer-row { grid-template-columns: 38px 1fr 85px 28px; }
  .customer-row > :nth-child(3), .customer-row > :nth-child(4) { display: none; }
  .team-grid { grid-template-columns: 1fr; }
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav { display: flex; overflow-x: auto; }
  .settings-nav button { flex: 0 0 auto; width: auto; }
  .timeline-row { grid-template-columns: 34px minmax(0,1fr); padding: 12px 0; }
  .timeline-time, .timeline-ip { display: none; }
  .customer-hero { align-items: flex-start; flex-direction: column; }
  .customer-hero .header-actions { width: 100%; }
  .customer-hero .header-actions button { flex: 1; }
  .customer-record-toolbar { align-items: stretch; flex-direction: column; }
  .customer-record-toolbar .toolbar-search { width: 100%; }
  .field-editor-row { grid-template-columns: 1fr 90px; }
  .field-editor-row .field-value { grid-column: 1 / -1; }
  .field-editor-row .secret-check { grid-column: 1; justify-self: start; grid-auto-flow: column; align-items: center; }
  .field-editor-row .field-remove { grid-column: 2; grid-row: 3; justify-self: end; }
}

@media (max-width: 580px) {
  .login-panel { align-items: flex-start; padding-top: 70px; }
  .auth-card h2 { font-size: 26px; }
  .otp { width: 39px; height: 49px; }
  .page-header { align-items: flex-start; flex-direction: column; }
  .page-header .header-actions { width: 100%; }
  .page-header .header-actions > button { flex: 1; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card { min-height: 108px; padding: 15px; }
  .stat-card > [data-icon] { display: none; }
  .stat-value strong { font-size: 22px; }
  .topbar .notification { display: none; }
  .search-trigger { width: auto; }
  .search-trigger kbd { display: none; }
  .customer-table .table-head { display: none; }
  .customer-table .table-row { grid-template-columns: 1fr auto; gap: 8px; padding: 12px; }
  .customer-table .table-row > :not(:first-child):not(:last-child) { display: none; }
  .vault-table .table-head { display: none; }
  .vault-table .table-row { grid-template-columns: 1fr auto; gap: 8px; padding: 12px; }
  .vault-table .table-row > :not(:first-child):not(:last-child) { display: none; }
  .toolbar { flex-wrap: wrap; }
  .toolbar-search { order: 3; width: 100%; }
  .toolbar-spacer { display: none; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-secret { grid-template-columns: 1fr auto; }
  .detail-secret > :nth-child(2) { display: none; }
  .form-grid { grid-template-columns: 1fr; }
  .form-group.full { grid-column: auto; }
  .customer-summary-grid { grid-template-columns: 1fr 1fr; }
  .record-fields { grid-template-columns: 1fr; }
  .record-field:nth-last-child(-n+2) { border-bottom: 1px solid #f0f3f5; }
  .record-field:last-child { border-bottom: 0; }
  .customer-title-line { align-items: flex-start; flex-direction: column; gap: 5px; }
}

/* Operations and sector workflow */
.operations-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.operations-strip > button, .operations-strip > div { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; min-height: 72px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 11px; background: white; box-shadow: var(--shadow-sm); text-align: left; }
.operations-strip > button { cursor: pointer; }
.operations-strip > button:hover { border-color: #bcded9; background: #fbfefd; }
.operations-strip > * > [data-icon]:first-child { width: 38px; height: 38px; color: var(--teal-700); border-radius: 10px; background: var(--teal-50); }
.operations-strip > * > span { display: grid; gap: 3px; }
.operations-strip strong { font-size: 14px; }
.operations-strip small { color: var(--muted); font-size: 12px; }
.operations-strip > button > [data-icon]:last-child { color: var(--teal-700); }
.toolbar-select { height: 42px; padding: 0 34px 0 12px; color: #526672; border: 1px solid var(--line); border-radius: 8px; background: white; font-size: 13px; }
.toolbar-count { font-size: 13px !important; }

.mini-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: 12px; margin-bottom: 18px; }
.mini-stats > div { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: white; box-shadow: var(--shadow-sm); }
.mini-stat-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--teal-700); border-radius: 10px; background: var(--teal-50); }
.mini-stat-icon.danger { color: var(--danger); background: var(--danger-bg); }
.mini-stat-icon.warning { color: var(--amber); background: var(--amber-bg); }
.mini-stats p { display: grid; gap: 3px; margin: 0; }
.mini-stats strong { font-size: 22px; }
.mini-stats small { color: var(--muted); font-size: 12px; }
.followup-list { overflow: hidden; }
.followup-row { display: grid; grid-template-columns: 145px minmax(200px, 1fr) 120px auto; align-items: center; gap: 18px; min-height: 82px; padding: 12px 18px; border-bottom: 1px solid #edf1f3; }
.followup-row:last-child { border-bottom: 0; }
.followup-row.completed { opacity: .65; }
.followup-row.completed .followup-main strong { text-decoration: line-through; }
.followup-date, .followup-main { display: grid; gap: 4px; }
.followup-date strong, .followup-main strong { font-size: 14px; }
.followup-date small, .followup-main small { color: var(--muted); font-size: 12px; }
.followup-actions { display: flex; align-items: center; gap: 6px; }
.status-pill.overdue { color: #b33c47; background: var(--danger-bg); }

.trash-list, .session-list { overflow: hidden; }
.trash-row { display: grid; grid-template-columns: 42px minmax(200px, 1fr) auto 34px; align-items: center; gap: 14px; min-height: 76px; padding: 12px 18px; border-bottom: 1px solid #edf1f3; }
.trash-row:last-child { border-bottom: 0; }
.trash-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: #647784; border-radius: 10px; background: #eef3f4; }
.trash-row > div { display: grid; gap: 4px; }
.trash-row strong { font-size: 14px; }
.trash-row small { color: var(--muted); font-size: 12px; }
.danger-button { background: var(--danger) !important; }
.danger-text { color: var(--danger) !important; }
.confirm-copy, .modal-copy { margin: 0; color: #536874; font-size: 14px; line-height: 1.65; }

.presence-summary { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 14px 16px; color: #225f59; border: 1px solid #cde7e3; border-radius: 10px; background: var(--teal-50); }
.presence-summary strong { font-size: 14px; }
.presence-summary p { margin: 0; color: #5c7976; font-size: 13px; }
.presence-pulse { width: 10px; height: 10px; border-radius: 50%; background: #25b989; box-shadow: 0 0 0 5px rgba(37,185,137,.12); }
.session-row { display: grid; grid-template-columns: 44px minmax(180px, 1.1fr) minmax(130px, .8fr) minmax(150px, .9fr) auto; align-items: center; gap: 15px; min-height: 82px; padding: 12px 18px; border-bottom: 1px solid #edf1f3; }
.session-row:last-child { border-bottom: 0; }
.session-row > div { display: grid; gap: 4px; }
.session-row strong { font-size: 13px; }
.session-row small { color: var(--muted); font-size: 12px; }
.session-row em { margin-left: 6px; padding: 3px 6px; color: var(--teal-700); border-radius: 5px; background: var(--teal-50); font-size: 10px; font-style: normal; }
.online-badge { display: flex; align-items: center; gap: 6px; color: #20866a; font-size: 12px; font-weight: 700; }
.online-badge i { width: 8px; height: 8px; border-radius: 50%; background: #2aba8e; }
.section-title { margin: 25px 0 12px; font-size: 18px; }
.mfa-state.offline { color: #86949e; }
.mfa-state.offline i { background: #aab4bb; }
.member-top { grid-template-columns: auto 1fr auto; }
.backup-actions { display: flex; gap: 10px; margin-bottom: 22px; }
.fixed-setting { padding: 6px 9px; color: var(--teal-700); border-radius: 6px; background: var(--teal-50); font-size: 12px; font-weight: 700; }
.settings-card select { min-height: 40px; padding: 0 10px; border: 1px solid #dce4e8; border-radius: 7px; font-size: 13px; }
.notification-list { padding: 8px !important; }
.notification-row { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; width: 100%; min-height: 68px; padding: 10px 12px; border: 0; border-bottom: 1px solid #edf1f3; background: white; text-align: left; cursor: pointer; }
.notification-row:hover { background: #f8fbfa; }
.notification-row > span:nth-child(2) { display: grid; gap: 4px; }
.notification-row strong { font-size: 13px; }
.notification-row small { color: var(--muted); font-size: 12px; }

/* Readability pass: never rely on 8–10px interface text */
body { font-size: 16px; }
.app-shell { grid-template-columns: 270px minmax(0, 1fr); }
.sidebar { width: 270px; padding: 25px 18px 18px; }
.main-content { grid-column: 2; }
.workspace-switcher small, .nav-label { font-size: 11px; }
.workspace-switcher strong { font-size: 14px; }
.nav-item { min-height: 46px; }
.nav-item b { font-size: 14px; }
.nav-item em { min-width: 25px; font-size: 11px; }
.sidebar-security strong, .profile-row strong { font-size: 12px; }
.sidebar-security small, .profile-row small { font-size: 11px; }
.topbar { height: 72px; padding: 0 36px; }
#breadcrumb, .search-trigger { font-size: 13px; }
.search-trigger { width: 230px; height: 40px; }
kbd { font-size: 10px; }
.page-content { padding: 34px 36px 55px; }
.page-header { margin-bottom: 26px; }
.page-header h1 { font-size: clamp(25px, 1.7vw, 31px); }
.page-header p { font-size: 14px; line-height: 1.5; }
.primary-button, .secondary-button { min-height: 42px; font-size: 14px; }
.primary-button.compact { height: 42px; }
.trial-banner { padding: 13px 16px; font-size: 13px; line-height: 1.5; }
.toolbar { margin-bottom: 16px; }
.toolbar-search { height: 42px; }
.toolbar-search input { font-size: 14px; }
.table-head { min-height: 44px; font-size: 11px; }
.table-row { min-height: 72px; font-size: 13px; }
.cell-stack strong, .company-main strong, .data-cell strong { font-size: 13px; }
.cell-stack small, .company-main small, .data-cell small { font-size: 11px; }
.status-pill, .tag { padding: 5px 9px; font-size: 11px; }
.copy-button { height: 34px; font-size: 12px; }
.empty-state { padding: 65px 22px; }
.empty-state h3 { font-size: 18px; }
.empty-state p { font-size: 13px; line-height: 1.5; }
.customer-identity p { font-size: 13px; }
.customer-title-line h1 { font-size: clamp(24px, 1.6vw, 30px); }
.summary-box > small { font-size: 11px; }
.summary-box > strong { font-size: 24px; }
.summary-box > span:last-child { font-size: 11px; }
.customer-record-toolbar h2 { font-size: 20px; }
.customer-record-toolbar p { font-size: 13px; }
.record-category { font-size: 11px; }
.record-head h3 { font-size: 15px; }
.record-field small { font-size: 11px; }
.record-value { font-size: 13px; }
.record-note { font-size: 12px; }
.record-footer { font-size: 10px; }
.field-builder-head strong { font-size: 14px; }
.field-builder-head small { font-size: 12px; }
.field-editor-row input, .field-editor-row select { height: 40px; font-size: 13px; }
.secret-check { font-size: 11px; }
.filter-tabs button { height: 36px; font-size: 12px; }
.timeline-row { min-height: 80px; }
.timeline-time, .timeline-ip { font-size: 11px; }
.timeline-time strong { font-size: 12px; }
.timeline-copy { font-size: 13px; }
.timeline-copy small { font-size: 11px; }
.member-top strong { font-size: 14px; }
.member-top small { font-size: 12px; }
.role-line small, .mfa-state { font-size: 11px; }
.settings-nav button { height: 43px; font-size: 13px; }
.settings-card h2 { font-size: 20px; }
.settings-card > p { font-size: 13px; line-height: 1.5; }
.setting-row strong { font-size: 14px; }
.setting-row small { font-size: 12px; }
.modal-head h2 { font-size: 21px; }
.modal-head p { font-size: 13px; }
.form-group label { font-size: 13px; }
.form-group input, .form-group select, .form-group textarea { min-height: 43px; font-size: 14px; }
.form-hint { font-size: 11px; }
.command-label { font-size: 11px; }
.command-result { min-height: 58px; }
.command-result strong { font-size: 14px; }
.command-result small, .command-result em { font-size: 11px; }
.toast { min-width: 320px; padding: 14px 16px; font-size: 13px; }
.auth-card .eyebrow { font-size: 12px; }
.auth-card h2 { font-size: 34px; }
.auth-card > p, .field-label, .input-wrap input, .check-row { font-size: 14px; }
.auth-help { font-size: 12px !important; }
.prototype-note strong { font-size: 13px; }
.prototype-note small { font-size: 12px; }
.vault-table .table-head, .vault-table .table-row { grid-template-columns: minmax(180px, 1.2fr) minmax(140px, 1fr) minmax(150px, 1fr) 110px 105px 112px; }

@media (min-width: 1650px) {
  .page-content { max-width: 1650px; padding-left: 48px; padding-right: 48px; }
  .tech-record-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-header h1 { font-size: 32px; }
  .table-row, .record-value, .cell-stack strong, .company-main strong, .followup-main strong { font-size: 14px; }
  .record-field small, .cell-stack small, .company-main small, .followup-main small { font-size: 12px; }
  .record-note, .timeline-copy { font-size: 13px; }
}

@media (max-width: 1050px) {
  .app-shell { grid-template-columns: 270px minmax(0, 1fr); }
  .operations-strip { grid-template-columns: 1fr; }
  .followup-row { grid-template-columns: 130px 1fr auto; }
  .followup-actions { grid-column: 2 / -1; }
  .session-row { grid-template-columns: 44px 1fr auto; }
  .session-row > div:nth-of-type(2), .session-row > div:nth-of-type(3) { display: none; }
}

@media (max-width: 800px) {
  .app-shell { display: block; padding-top: 57px; }
  .main-content { grid-column: auto; }
  .page-content { padding: 24px 18px 42px; }
  .topbar { padding: 0 18px; }
  .page-header h1 { font-size: 25px; }
  .page-header p { font-size: 13px; }
  .customer-summary-grid { grid-template-columns: 1fr 1fr; }
  .operations-strip strong { font-size: 14px; }
  .operations-strip small { font-size: 12px; }
  .followup-row { grid-template-columns: 1fr auto; gap: 10px; padding: 15px; }
  .followup-date { grid-column: 1; }
  .followup-main { grid-column: 1 / -1; }
  .followup-actions { grid-column: 1 / -1; flex-wrap: wrap; }
  .trash-row { grid-template-columns: 40px 1fr auto; }
  .trash-row > .secondary-button { grid-column: 2; }
  .trash-row > .more-button { grid-column: 3; grid-row: 2; }
  .presence-summary { align-items: flex-start; flex-wrap: wrap; }
  .presence-summary p { flex-basis: 100%; }
  .mini-stats { grid-template-columns: 1fr 1fr 1fr; }
  .session-row { grid-template-columns: 40px 1fr; }
  .session-row > .online-badge { grid-column: 2; }
}

@media (max-width: 580px) {
  .stats-grid, .customer-summary-grid, .mini-stats { grid-template-columns: 1fr 1fr; }
  .mini-stats > div:last-child { grid-column: 1 / -1; }
  .record-value, .cell-stack strong, .company-main strong { font-size: 13px; }
  .record-field small, .cell-stack small, .company-main small { font-size: 11px; }
  .filter-tabs { width: 100%; overflow-x: auto; }
  .filter-tabs button { flex: 0 0 auto; }
  .toolbar-select { flex: 1; }
  .toast-root { left: 14px; right: 14px; bottom: 14px; }
  .toast { width: 100%; min-width: 0; }
}


/* Network Bilgisayar v6 branding + mobile UX */
.network-logo { display:block; width:auto; object-fit:contain; }
.network-logo-light { width:min(360px, 74%); max-height:92px; filter:drop-shadow(0 6px 18px rgba(0,0,0,.18)); }
.sidebar-network-logo { width:100%; max-width:205px; max-height:58px; object-position:left center; }
.mobile-network-logo { width:180px; max-height:45px; object-position:left center; }
.network-brand { min-height:48px; }
.company-logo img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.logo-preview { display:flex; align-items:center; gap:12px; padding:10px; border:1px dashed #cfdadd; border-radius:10px; background:#fafcfc; }
.logo-preview img { width:56px; height:56px; object-fit:cover; border-radius:12px; border:1px solid var(--line); background:white; }
.logo-preview small { color:var(--muted); line-height:1.4; }
.sync-indicator { display:inline-flex; align-items:center; gap:6px; color:#4f6d68; font-size:12px; }
.sync-indicator i { width:7px; height:7px; border-radius:50%; background:#2aba8e; }

@supports (padding: max(0px)) {
  body { padding-bottom: env(safe-area-inset-bottom); }
  .mobile-topbar { padding-top: env(safe-area-inset-top); height: calc(57px + env(safe-area-inset-top)); }
  .app-shell { padding-top: calc(57px + env(safe-area-inset-top)); }
  .sidebar { padding-top: calc(18px + env(safe-area-inset-top)); padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .login-panel { padding-top: calc(70px + env(safe-area-inset-top)); padding-bottom: calc(26px + env(safe-area-inset-bottom)); }
  .modal { padding-bottom: env(safe-area-inset-bottom); }
}

@media (max-width: 580px) {
  body { font-size:14px; }
  .mobile-network-logo { width:148px; max-height:38px; }
  .topbar { height:52px; min-height:52px; }
  .app-shell { padding-top: calc(54px + env(safe-area-inset-top, 0px)); }
  .mobile-topbar { height:calc(54px + env(safe-area-inset-top, 0px)); padding-left:14px; padding-right:14px; }
  .page-content { padding:16px 12px calc(28px + env(safe-area-inset-bottom, 0px)); }
  .page-header { gap:10px; margin-bottom:16px; }
  .page-header h1 { font-size:21px; line-height:1.2; }
  .page-header p { font-size:12px; }
  .primary-button, .secondary-button { min-height:38px; font-size:13px; }
  .toolbar { gap:8px; margin-bottom:10px; }
  .toolbar-search { height:40px; }
  .toolbar-search input, .form-group input, .form-group select, .form-group textarea { font-size:16px; }
  .customer-table .table-row { min-height:64px; padding:10px; }
  .company-logo, .table-company .company-logo { width:38px; height:38px; border-radius:10px; }
  .customer-hero { padding:14px; margin-bottom:12px; }
  .customer-identity { gap:10px; }
  .customer-identity .company-logo { width:44px; height:44px; }
  .customer-title-line h1 { font-size:20px; }
  .customer-summary-grid { gap:8px; margin-bottom:14px; }
  .summary-box { min-height:76px; padding:11px; }
  .summary-box > strong { font-size:20px; }
  .tech-record-grid { gap:10px; }
  .record-head { min-height:58px; padding:10px 11px; }
  .record-fields { padding:2px 11px 6px; }
  .record-field { padding:9px 4px 8px 0; }
  .modal-backdrop { align-items:flex-end; padding:0; }
  .modal { width:100%; max-height:88dvh; border-radius:18px 18px 0 0; }
  .modal.wide { width:100%; }
  .modal-head { padding:16px 16px 13px; }
  .modal-body { padding:15px 16px; }
  .modal-footer { position:sticky; bottom:0; z-index:2; padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .form-grid { gap:11px; }
  .form-group { gap:5px; }
  .sidebar { width:min(86vw, 320px); }
}


/* v7 smart renewals + notification center */
.notification-nav em.badge-alert { background:#dc3545; color:#fff; font-weight:800; }
.notification-hero { display:flex; align-items:center; gap:16px; margin-bottom:18px; padding:20px; border:1px solid #d8e7e3; border-radius:14px; background:#f4fbf9; }
.notification-hero.has-alerts { border-color:#f1c2c6; background:linear-gradient(135deg,#fff2f3,#fff9ed); }
.notification-hero > [data-icon] { width:46px; height:46px; flex:0 0 46px; border-radius:13px; background:#fff; color:#d64d57; box-shadow:var(--shadow-sm); }
.notification-hero strong { display:block; font-family:"Manrope",sans-serif; font-size:20px; }
.notification-hero p { margin:4px 0 0; color:var(--muted); font-size:13px; }
.notification-page-list { overflow:hidden; }
.notification-card { display:grid; grid-template-columns:44px minmax(0,1fr) 125px auto; align-items:center; gap:14px; min-height:92px; padding:16px 18px; border-bottom:1px solid #edf1f3; border-left:4px solid #e6b85c; background:#fff; }
.notification-card:last-child { border-bottom:0; }
.notification-card.is-critical { border-left-color:#f08b36; background:#fffaf3; }
.notification-card.is-overdue { border-left-color:#d64d57; background:#fff5f6; }
.notification-card-icon { display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; background:#fff; color:#c77119; box-shadow:0 0 0 1px #eee; }
.notification-card.is-overdue .notification-card-icon { color:#d64d57; }
.notification-card-copy { min-width:0; }
.notification-card-copy small { display:block; margin-bottom:3px; color:#8a98a2; font-size:11px; font-weight:700; text-transform:uppercase; }
.notification-card-copy strong { display:block; font-size:14px; }
.notification-card-copy p { margin:4px 0 0; color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.notification-card-date { text-align:right; }
.notification-card-date strong { display:block; color:#b56d10; font-size:13px; }
.notification-card.is-critical .notification-card-date strong,.notification-card.is-overdue .notification-card-date strong { color:#d64d57; }
.notification-card-date small { color:var(--muted); font-size:11px; }
.notification-card-actions { display:flex; gap:7px; }
#followup-smart-fields { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:800px){
  .notification-card{grid-template-columns:40px 1fr; gap:10px; padding:14px;}
  .notification-card-date{grid-column:2;text-align:left;display:flex;gap:8px;align-items:center;}
  .notification-card-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;}
  .notification-card-actions button{width:100%;}
  #followup-smart-fields{grid-template-columns:1fr;}
  .notification-hero{padding:16px;}
  .notification-hero strong{font-size:17px;}
}

/* v8: lokasyon, rol ve oturum iyileştirmeleri */
.location-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 24px}.location-card{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:11px;background:#fff;box-shadow:var(--shadow-sm)}.location-card-icon{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:10px;background:var(--teal-50);color:var(--teal-700)}.location-card>div:nth-child(2){display:grid;gap:3px;min-width:0}.location-card strong{font-size:14px}.location-card small,.location-card span{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.permission-matrix{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}.permission-matrix>div{padding:15px;border:1px solid var(--line);border-radius:11px;background:#fff}.permission-matrix strong{font-size:14px}.permission-matrix p,.member-permission-copy{margin:7px 0 0;color:var(--muted);font-size:12px;line-height:1.55}.role-chip{display:inline-block;margin:0 6px;padding:3px 6px;border-radius:5px;background:var(--teal-50);color:var(--teal-700);font-size:10px;font-weight:700}.session-row{grid-template-columns:44px minmax(180px,1.1fr) minmax(130px,.8fr) minmax(150px,.9fr) auto auto}
@media(max-width:1050px){.location-grid,.permission-matrix{grid-template-columns:1fr 1fr}.session-row{grid-template-columns:44px 1fr auto}.session-row>div:nth-of-type(2),.session-row>div:nth-of-type(3){display:none}}
@media(max-width:650px){.location-grid,.permission-matrix{grid-template-columns:1fr}.customer-record-toolbar .header-actions{width:100%;display:grid;grid-template-columns:1fr}.customer-record-toolbar .toolbar-select,.customer-record-toolbar .toolbar-search{width:100%;max-width:none}.session-row{grid-template-columns:40px 1fr auto}.session-row>.online-badge{grid-column:2}.session-row>[data-close-session]{grid-column:2/4;width:100%}}

/* v9 detailed permissions, backups and versioning */
.permission-editor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}.permission-group{margin:0;padding:12px;border:1px solid var(--line);border-radius:10px}.permission-group legend{padding:0 6px;font-size:12px;font-weight:800}.permission-check{display:flex;align-items:flex-start;gap:8px;padding:6px 0;font-size:12px;line-height:1.35}.permission-check input{margin-top:2px;accent-color:var(--teal-600)}.permission-summary{display:grid;gap:3px;margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}.permission-summary strong{font-size:12px}.permission-summary small{font-size:11px;color:var(--muted)}.version-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}.version-grid>div{display:grid;gap:5px;padding:14px;border:1px solid var(--line);border-radius:10px;background:#fbfcfc}.version-grid small{font-size:10px;color:var(--muted);font-weight:800}.version-grid strong{font-size:14px}.backup-list{border:1px solid var(--line);border-radius:10px;overflow:hidden}.backup-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 14px;border-bottom:1px solid var(--line)}.backup-row:last-child{border-bottom:0}.backup-row>div{display:grid;gap:4px}.backup-row strong{font-size:13px}.backup-row small{font-size:11px;color:var(--muted)}
@media(max-width:800px){.permission-editor{grid-template-columns:1fr}.version-grid{grid-template-columns:1fr}.backup-row{align-items:flex-start;flex-direction:column}.backup-row button{width:100%}}


/* v11 Operations Dashboard */
.dashboard-welcome{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:16px;padding:4px 2px}
.dashboard-welcome small{font-size:11px;font-weight:800;color:var(--muted);text-transform:capitalize}
.dashboard-welcome h1{margin:4px 0 3px;font-size:28px;letter-spacing:-.7px}
.dashboard-welcome p{margin:0;color:var(--muted);font-size:13px}
.dashboard-search{height:52px;border:1px solid var(--line);background:#fff;border-radius:13px;display:flex;align-items:center;gap:10px;padding:0 9px 0 15px;margin-bottom:14px;box-shadow:0 1px 2px rgba(10,30,40,.03)}
.dashboard-search>span[data-icon]{width:19px;height:19px;color:var(--muted)}
.dashboard-search input{border:0;outline:0;background:transparent;flex:1;min-width:0;font:inherit;font-size:14px}
.dashboard-search .secondary-button{height:36px}
.dashboard-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin-bottom:14px}
.dashboard-stat{appearance:none;text-align:left;border:1px solid var(--line);background:#fff;border-radius:13px;padding:15px;display:grid;grid-template-columns:38px minmax(0,1fr) 18px;align-items:center;gap:11px;cursor:pointer;color:inherit;transition:.15s ease}
.dashboard-stat:hover{transform:translateY(-1px);border-color:#b8c8ca;box-shadow:0 6px 18px rgba(20,50,55,.06)}
.dashboard-stat.warn{border-color:#ead7a3;background:#fffdf7}.dashboard-stat.danger{border-color:#edb8b4;background:#fff9f8}
.dashboard-stat-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:#eff5f5;color:var(--teal-700)}
.dashboard-stat.warn .dashboard-stat-icon{background:#fff3ce;color:#966600}.dashboard-stat.danger .dashboard-stat-icon{background:#ffe4e1;color:#a52d24}
.dashboard-stat small{display:block;font-size:9px;font-weight:900;letter-spacing:.6px;color:var(--muted)}
.dashboard-stat strong{display:block;font-size:23px;line-height:1.05;margin-top:3px}.dashboard-stat p{margin:3px 0 0;font-size:10px;color:var(--muted)}
.dashboard-arrow{color:var(--muted);width:16px!important;height:16px!important}
.dashboard-columns{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.dashboard-panel{padding:0;overflow:hidden}
.dashboard-panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 16px;border-bottom:1px solid var(--line)}
.dashboard-panel-head small{font-size:9px;font-weight:900;letter-spacing:.7px;color:var(--muted)}
.dashboard-panel-head h2{font-size:15px;margin:2px 0 0}.dashboard-panel-head .link-button{display:flex;align-items:center;gap:5px;font-size:11px}
.dashboard-list{display:grid}.dashboard-list-row,.dashboard-warning-row,.dashboard-team>button,.dashboard-empty-button{width:100%;appearance:none;border:0;border-bottom:1px solid var(--line);background:#fff;color:inherit;text-align:left;cursor:pointer}
.dashboard-list-row:last-child,.dashboard-warning-row:last-child,.dashboard-team>button:last-child,.dashboard-empty-button:last-child{border-bottom:0}
.dashboard-list-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto 16px;gap:10px;align-items:center;padding:11px 14px}
.dashboard-list-row:hover,.dashboard-warning-row:hover,.dashboard-team>button:hover,.dashboard-empty-button:hover{background:#f8fbfb}
.dashboard-list-row.warn{background:#fffdf7}.dashboard-list-row.danger{background:#fff9f8}
.dashboard-row-icon{width:32px;height:32px;border-radius:9px;background:#f1f5f5;display:grid;place-items:center;color:var(--teal-700)}
.dashboard-list-row.warn .dashboard-row-icon{background:#fff3ce;color:#966600}.dashboard-list-row.danger .dashboard-row-icon{background:#ffe4e1;color:#a52d24}
.dashboard-row-copy{min-width:0;display:grid;gap:2px}.dashboard-row-copy small,.dashboard-row-copy em{font-size:10px;color:var(--muted);font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dashboard-row-copy strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dashboard-row-date{text-align:right;display:grid;gap:2px}
.dashboard-row-date strong{font-size:11px}.dashboard-row-date small{font-size:9px;color:var(--muted)}
.dashboard-quick-panel{padding:0;margin-bottom:14px}.dashboard-quick-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:0}
.dashboard-quick-grid>button{appearance:none;border:0;border-right:1px solid var(--line);background:#fff;padding:15px 12px;display:grid;gap:5px;text-align:left;color:inherit;cursor:pointer}
.dashboard-quick-grid>button:last-child{border-right:0}.dashboard-quick-grid>button:hover{background:#f8fbfb}
.dashboard-quick-grid>button>span[data-icon]{width:20px;height:20px;color:var(--teal-700);margin-bottom:2px}.dashboard-quick-grid strong{font-size:11px}.dashboard-quick-grid small{font-size:9px;color:var(--muted);line-height:1.3}
.dashboard-team{display:grid}.dashboard-team>button{display:grid;grid-template-columns:36px minmax(0,1fr) auto 16px;align-items:center;gap:10px;padding:11px 14px}
.dashboard-team>button>span:nth-child(2){display:grid;gap:2px}.dashboard-team strong{font-size:12px}.dashboard-team small{font-size:10px;color:var(--muted)}
.dashboard-warning-row{display:grid;grid-template-columns:20px minmax(0,1fr) 16px;gap:9px;align-items:center;padding:12px 14px;font-size:11px}.dashboard-warning-row>span[data-icon]:first-child{color:#a06b00}
.dashboard-empty-button{display:flex;align-items:center;gap:11px;padding:18px 14px}.dashboard-empty-button>span[data-icon]{color:var(--teal-700)}.dashboard-empty-button>span:not([data-icon]){display:grid;gap:2px;flex:1}.dashboard-empty-button strong{font-size:12px}.dashboard-empty-button small{font-size:10px;color:var(--muted)}
@media(max-width:1050px){.dashboard-stat-grid{grid-template-columns:repeat(2,1fr)}.dashboard-quick-grid{grid-template-columns:repeat(3,1fr)}.dashboard-quick-grid>button{border-bottom:1px solid var(--line)}}
@media(max-width:800px){.dashboard-welcome{align-items:flex-start}.dashboard-welcome h1{font-size:22px}.dashboard-welcome p{font-size:11px}.dashboard-search{height:auto;min-height:48px;padding:8px 10px}.dashboard-search .secondary-button{display:none}.dashboard-stat-grid{grid-template-columns:1fr 1fr;gap:8px}.dashboard-stat{grid-template-columns:32px minmax(0,1fr) 14px;padding:11px 10px;gap:8px}.dashboard-stat-icon{width:32px;height:32px}.dashboard-stat strong{font-size:19px}.dashboard-stat p{font-size:9px}.dashboard-columns{grid-template-columns:1fr}.dashboard-quick-grid{grid-template-columns:1fr 1fr}.dashboard-quick-grid>button{min-height:88px}.dashboard-list-row{grid-template-columns:30px minmax(0,1fr) auto 14px;padding:10px}.dashboard-panel-head{padding:13px}.dashboard-welcome>.primary-button{font-size:0;width:40px;min-width:40px;padding:0}.dashboard-welcome>.primary-button span{margin:0}}


/* v12 Hizmetler */
.services-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:14px;align-items:start}
.service-sheet-list{padding:0;overflow:hidden;position:sticky;top:84px}
.service-sheet-list-head{display:flex;align-items:center;justify-content:space-between;padding:14px;border-bottom:1px solid var(--line);font-size:12px}
.service-sheet-list-head span{background:#eef5f5;border-radius:999px;padding:3px 7px;color:var(--muted);font-size:10px}
.service-sheet-scroll{display:grid;max-height:calc(100dvh - 190px);overflow:auto}
.service-sheet-scroll>button{appearance:none;border:0;border-bottom:1px solid var(--line);background:#fff;color:inherit;padding:12px;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer}
.service-sheet-scroll>button>span:first-child{display:flex;align-items:center;gap:9px;min-width:0}.service-sheet-scroll>button>span:first-child>span:nth-child(2){display:grid;gap:2px;min-width:0}
.service-sheet-scroll strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.service-sheet-scroll small{font-size:9px;color:var(--muted)}
.service-sheet-scroll>button.active{background:#eef8f7;color:var(--teal-700)}.service-sheet-scroll>button:hover{background:#f8fbfb}
.service-sheet{padding:0;min-width:0;overflow:hidden}.service-sheet-head{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;padding:16px;border-bottom:1px solid var(--line)}
.service-sheet-head small{font-size:9px;color:var(--muted);font-weight:900;letter-spacing:.7px}.service-sheet-head h2{margin:3px 0;font-size:20px}.service-sheet-head p{margin:0;color:var(--muted);font-size:11px}
.service-table-scroll{overflow:auto;max-width:100%;border-top:1px solid var(--line)}.service-data-table{width:max-content;min-width:100%;border-collapse:collapse;background:#fff}
.service-data-table th{position:sticky;top:0;z-index:1;background:#f8fafb;color:#425b68;text-align:left;font-size:10px;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;min-width:130px}
.service-data-table th:first-child{min-width:180px;left:0;z-index:2}.service-data-table th small{display:block;color:#8a9ba4;font-weight:500;margin-top:2px}.service-data-table th i{color:var(--danger);font-style:normal;margin-left:3px}
.service-data-table td{padding:11px 12px;border-bottom:1px solid var(--line);font-size:11px;vertical-align:top;max-width:260px;word-break:break-word}.service-data-table tbody tr:hover td{background:#fbfdfd}
.service-customer-cell{position:sticky;left:0;background:#fff;z-index:1}.service-customer-cell small{display:block;font-size:9px;color:var(--muted);margin-top:2px}.table-link{appearance:none;border:0;background:none;padding:0;color:var(--teal-700);font-weight:800;cursor:pointer;text-align:left}
.service-row-actions{white-space:nowrap;min-width:88px}.muted-cell{color:var(--muted)}
.service-sheet-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;color:var(--muted);font-size:10px;border-top:1px solid var(--line)}
.service-total-grid{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px}.service-total-card{display:grid;gap:3px;min-width:180px;background:#f8fbfb;border:1px solid var(--line);border-radius:10px;padding:9px 11px}.service-total-card>small{font-size:9px;font-weight:900;color:var(--teal-700)}.service-total-card span{font-size:9px;color:var(--muted)}.service-total-card strong{color:var(--text);font-size:11px;margin-left:4px}
.service-column-builder{display:grid;gap:8px;margin-top:10px}.service-column-builder-row{display:grid;grid-template-columns:24px minmax(140px,1.2fr) minmax(150px,1fr) 100px 38px;gap:8px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:10px;background:#fbfcfc}.service-column-builder-row input,.service-column-builder-row select{min-width:0}.drag-handle{color:var(--muted);display:grid;place-items:center}.service-required{font-size:10px;display:flex;align-items:center;gap:5px}
.switch-field{min-height:42px;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:9px;padding:0 11px;background:#fff}.switch-field span{font-size:11px;color:var(--muted)}
.customer-service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:18px}.customer-service-card{padding:0;overflow:hidden}.customer-service-head{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:9px;align-items:center;padding:12px;border-bottom:1px solid var(--line)}.customer-service-head>span:first-child{width:34px;height:34px;border-radius:9px;background:#eff6f5;color:var(--teal-700);display:grid;place-items:center}.customer-service-head small{display:block;color:var(--muted);font-size:9px}.customer-service-head strong{font-size:12px}.customer-service-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}.customer-service-values>div{padding:10px 12px;border-right:1px solid var(--line)}.customer-service-values>div:last-child{border-right:0}.customer-service-values small{display:block;color:var(--muted);font-size:9px;margin-bottom:2px}.customer-service-values strong{font-size:10px}
.service-picker{display:grid;gap:8px}.loading-panel{padding:18px;display:flex;gap:8px;align-items:center;color:var(--muted)}.service-empty{padding:28px}
@media(max-width:950px){.services-layout{grid-template-columns:1fr}.service-sheet-list{position:static}.service-sheet-scroll{display:flex;overflow:auto;max-height:none}.service-sheet-scroll>button{min-width:170px;border-right:1px solid var(--line);border-bottom:0}.customer-service-grid{grid-template-columns:1fr}}
@media(max-width:700px){.service-sheet-head{display:grid}.service-sheet-head .header-actions{display:flex;flex-wrap:wrap}.service-column-builder-row{grid-template-columns:20px minmax(0,1fr) 38px}.service-column-type{grid-column:2}.service-required{grid-column:2}.service-data-table th,.service-data-table td{padding:9px 10px}.customer-service-values{grid-template-columns:1fr 1fr}.customer-service-values>div{border-bottom:1px solid var(--line)}}


/* v13 Hizmetler ve Ürünler */
.product-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.product-toolbar .toolbar-search{flex:1;max-width:none}
.fx-rate-box{display:flex;align-items:center;gap:9px;min-height:42px;padding:7px 11px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--teal-700)}
.fx-rate-box>span:nth-child(2){display:grid;gap:1px;min-width:0}.fx-rate-box strong{font-size:11px;color:var(--ink)}.fx-rate-box small{font-size:9px;color:var(--muted);white-space:nowrap}
.product-catalog-panel{padding:0;overflow:hidden}.product-table-scroll{width:100%;overflow:auto}.product-table{width:max-content;min-width:100%;border-collapse:collapse;background:#fff}
.product-table th{position:sticky;top:0;z-index:1;min-width:125px;padding:10px 12px;background:#f8fafb;border-bottom:1px solid var(--line);font-size:10px;color:#566b78;text-align:left;white-space:nowrap}.product-table th i{color:var(--danger);font-style:normal;margin-left:3px}
.product-table td{padding:11px 12px;border-bottom:1px solid var(--line);font-size:11px;max-width:300px;vertical-align:middle}.product-table tbody tr:hover td{background:#fbfdfd}
.product-table th:first-child,.product-table td:first-child{position:sticky;left:0;z-index:2;background:#fff}.product-table th:first-child{background:#f8fafb}
.product-actions-col{position:sticky!important;right:0!important;z-index:2!important;background:#fff!important;min-width:88px!important;white-space:nowrap}.product-table th.product-actions-col{background:#f8fafb!important}
.product-tags{display:flex;flex-wrap:wrap;gap:4px}.product-tags span{padding:3px 6px;border-radius:999px;background:#eef5f5;color:#49646a;font-size:9px}
.product-table-footer{display:flex;justify-content:space-between;gap:14px;padding:11px 14px;color:var(--muted);font-size:9px;border-top:1px solid var(--line)}
.product-vat-check{min-height:43px;padding:0 11px;border:1px solid #dce4e8;border-radius:8px;background:#fff;display:flex!important;align-items:center;gap:8px;font-weight:500!important}.product-vat-check input{width:16px!important;min-height:0!important;height:16px!important;accent-color:var(--teal-600)}
.product-calc-preview{display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden;border:1px solid #cde7e3;border-radius:10px;background:#f4fbfa}.product-calc-preview>div{padding:12px;border-right:1px solid #d9ece9}.product-calc-preview>div:last-child{border-right:0}.product-calc-preview small{display:block;font-size:9px;color:#68817e;margin-bottom:3px}.product-calc-preview strong{font-size:13px;color:#164f4b}
.product-column-list{display:grid;gap:8px;margin-top:12px}.product-column-row{display:grid;grid-template-columns:62px minmax(150px,1.2fr) minmax(140px,1fr) 90px 38px;gap:8px;align-items:center;padding:9px;border:1px solid var(--line);border-radius:10px;background:#fbfcfc}
.product-column-move{display:flex;gap:2px}.product-column-move .icon-button{width:28px;height:32px;border:1px solid var(--line);border-radius:6px;background:#fff}
.product-column-main{display:grid;gap:2px}.product-column-main input{min-width:0}.product-column-main small{font-size:9px;color:var(--muted)}
.product-column-row input,.product-column-row select,.product-column-row textarea{width:100%;min-height:38px;padding:7px 9px;border:1px solid #dce4e8;border-radius:7px;background:#fff;font-size:11px}
.product-column-row input:disabled,.product-column-row select:disabled{background:#f0f3f4;color:#6f7e86}.product-column-options{grid-column:2 / -1;min-height:76px!important;resize:vertical}.product-column-options.hidden{display:none}
.multi-select-box{display:flex;flex-wrap:wrap;gap:7px;padding:9px;border:1px solid #dce4e8;border-radius:8px;background:#fff}.multi-select-box label{display:flex;align-items:center;gap:5px;padding:5px 7px;border-radius:7px;background:#f5f8f8;font-size:11px;font-weight:500}.multi-select-box input{width:14px!important;min-height:0!important;height:14px!important}
@media(max-width:800px){.product-toolbar{align-items:stretch;flex-direction:column}.fx-rate-box{width:100%}.fx-rate-box>span:nth-child(2){flex:1}.product-calc-preview{grid-template-columns:1fr 1fr}.product-calc-preview>div:nth-child(2){border-right:0}.product-calc-preview>div:nth-child(-n+2){border-bottom:1px solid #d9ece9}.product-column-row{grid-template-columns:58px minmax(0,1fr) 38px}.product-column-type{grid-column:2}.product-column-row .service-required{grid-column:2}.product-column-options{grid-column:2 / -1}.product-table-footer{flex-direction:column}}

/* v14 bulk import/export + column filters */
.product-th-wrap{display:flex;align-items:center;justify-content:space-between;gap:8px}.column-filter-button{width:24px;height:24px;border:1px solid transparent;border-radius:6px;background:transparent;color:#83939d;cursor:pointer}.column-filter-button:hover,.column-filter-button.active{color:var(--teal-700);border-color:#cde4e1;background:#eef8f7}.column-filter-button svg{width:13px!important;height:13px!important}
.filter-option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.filter-option-grid label{display:flex;align-items:center;gap:7px;padding:9px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:12px}.filter-option-grid input{accent-color:var(--teal-600)}
.import-tabs{margin-bottom:16px}.file-drop-zone{min-height:180px;border:2px dashed #cddadd;border-radius:13px;background:#fafcfc;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;cursor:pointer;color:var(--teal-700)}.file-drop-zone>[data-icon]{width:42px;height:42px;border-radius:12px;background:var(--teal-50)}.file-drop-zone strong{font-size:14px;color:var(--ink)}.file-drop-zone small{font-size:11px;color:var(--muted)}
.import-map-grid{display:grid;gap:7px;margin-bottom:18px}.import-map-grid>div{display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);gap:8px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:8px}.import-map-grid strong{font-size:11px}.import-map-grid select{height:38px;border:1px solid #dce4e8;border-radius:7px;padding:0 8px;font-size:11px}
.import-preview-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:12px}.import-preview-stats>div{padding:12px;border:1px solid var(--line);border-radius:9px;background:#fafcfc;display:grid;gap:2px}.import-preview-stats strong{font-size:20px}.import-preview-stats small{font-size:10px;color:var(--muted)}.import-preview-stats .danger{background:var(--danger-bg);border-color:#f0c5c9;color:var(--danger)}
.import-preview-table{max-height:360px;overflow:auto;border:1px solid var(--line);border-radius:9px}.import-preview-table table{width:100%;border-collapse:collapse}.import-preview-table th,.import-preview-table td{padding:8px 9px;border-bottom:1px solid var(--line);font-size:10px;text-align:left}.import-preview-table th{position:sticky;top:0;background:#f8fafb}.import-preview-table tr.bad td{background:#fff4f5;color:#9f2d36}
.export-grid{display:grid;gap:8px}
@media(max-width:800px){.page-header .header-actions{flex-wrap:wrap}.page-header .header-actions .secondary-button,.page-header .header-actions .primary-button{flex:1 1 calc(50% - 5px)}.filter-option-grid{grid-template-columns:1fr}}

.import-error-text{display:inline-block;max-width:300px;color:#a4313b;font-weight:700;line-height:1.35}
#run-import:disabled{opacity:.5;cursor:not-allowed;transform:none}