:root { color-scheme: light; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; color: #1d1915; background: #f5f2ed; --orange:#f56600; --orange-soft:#fff3e9; --ink:#191714; --muted:#77716a; --line:#e5dfd7; --green:#178452; --red:#a62d24; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 1024px; background: #f5f2ed; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.login-screen { min-height: 100vh; display: grid; grid-template-columns: 1.15fr .85fr; background: #fff; }
.login-brand { padding: 8vw; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(140deg,#f56600,#dc4c00); color: white; }
.brand-mark { width: 82px; height: 82px; display: grid; place-items: center; border: 2px solid currentColor; border-radius: 25px 8px 25px 8px; font-size: 31px; font-weight: 900; letter-spacing: -.08em; }
.brand-mark.small { width: 42px; height: 42px; border-radius: 13px 5px 13px 5px; font-size: 18px; }
.login-brand h1 { margin: 34px 0 8px; font-size: 52px; }.login-brand p { margin: 0; font-size: 18px; opacity: .88; }
.login-card { width: min(420px,75%); margin: auto; }.login-card h2 { margin: 4px 0 28px; font-size: 32px; }.login-card label { display: block; margin: 18px 0; color: #665f58; font-size: 13px; }
input, select, textarea { width: 100%; margin-top: 7px; padding: 10px 12px; border: 1px solid #d9d2ca; border-radius: 9px; background: #fff; color: #1d1915; outline: none; }
input, select { height: 42px; } textarea { min-height: 116px; resize: vertical; line-height: 1.55; }
input:focus, select:focus, textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(245,102,0,.1); }
.eyebrow { margin: 0 0 5px; color: var(--orange); font-size: 11px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.primary, .secondary, .danger, .ghost { min-height: 40px; padding: 9px 16px; border: 0; border-radius: 9px; font-size: 13px; font-weight: 750; }
.primary { background: var(--orange); color: white; }.secondary { border: 1px solid #ddd6ce; background: #fff; color: #28231f; }.danger { background: #fff0ee; color: var(--red); }.ghost { background: transparent; color: #665f58; }.wide { width: 100%; margin-top: 8px; }
.form-note, .hint { color: var(--muted); font-size: 12px; line-height: 1.6; }
.app { min-height: 100vh; display: grid; grid-template-columns: 238px 1fr; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 238px; padding: 24px 17px; display: flex; flex-direction: column; background: var(--ink); color: white; }
.sidebar-brand { padding: 2px 8px 28px; display: flex; align-items: center; gap: 12px; }.sidebar-brand strong,.sidebar-brand span { display: block; }.sidebar-brand strong { font-size: 18px; }.sidebar-brand div span { margin-top: 3px; color: #aaa29a; font-size: 11px; }
.sidebar nav { display: grid; gap: 7px; }.nav-button { width: 100%; padding: 13px 14px; display: flex; gap: 12px; border: 0; border-radius: 10px; background: transparent; color: #c9c3bd; text-align: left; }.nav-button:hover,.nav-button.active { background: #302b27; color: white; }.nav-button.active { box-shadow: inset 3px 0 var(--orange); }
.sidebar-foot { margin-top: auto; padding: 15px 10px 0; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #39332e; color: #c8c2bc; font-size: 12px; }.sidebar-foot button { border:0;background:transparent;color:#e9874a;font-size:12px; }
.workspace { grid-column: 2; min-width: 0; }.workspace-header { height: 92px; padding: 20px 34px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.86); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(10px); }.workspace-header h1 { margin: 0; font-size: 25px; }.sync-status { color: var(--green); font-size: 12px; }
#content { padding: 28px 34px 60px; }
.panel { margin-bottom: 20px; padding: 23px 25px; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 9px 28px rgba(45,32,19,.045); }
.panel-head { margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }.panel-head h2,.panel-head h3 { margin: 0; }.panel-head h2 { font-size: 20px; }.panel-head h3 { font-size: 16px; }.actions { display: flex; gap: 9px; align-items:center; }
.toolbar { margin-bottom: 17px; display: grid; grid-template-columns: 1fr 180px auto; gap: 10px; }.toolbar input,.toolbar select { margin:0; }
.metric-grid { margin-bottom: 20px; display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; }.metric { padding: 18px; border: 1px solid var(--line); border-radius: 13px; background:#fff; }.metric span { display:block;color:var(--muted);font-size:11px; }.metric strong { display:block;margin-top:7px;font-size:22px;font-variant-numeric:tabular-nums; }
.table-wrap { overflow:auto; border:1px solid var(--line);border-radius:11px; }.data-table { width:100%;border-collapse:collapse;font-size:12px; }.data-table th,.data-table td { padding:10px 11px;border-bottom:1px solid #eee9e3;text-align:left;vertical-align:middle;white-space:nowrap; }.data-table th { background:#f8f6f3;color:#625d57;font-weight:750; }.data-table td.num,.data-table th.num { text-align:right; }.data-table tbody tr:hover { background:#fffaf6; }.data-table input,.data-table select { min-width:90px;height:34px;margin:0;padding:0 8px;line-height:32px;vertical-align:middle;font-size:12px; }.data-table .tiny { min-width:70px;width:86px; }.data-table .wide-cell { min-width:160px; }
.data-table.composition-table th,.data-table.composition-table td,.data-table.composition-table th.num,.data-table.composition-table td.num { text-align:center; }.data-table.composition-table input { text-align:center; }
.data-table.sales-table th,.data-table.sales-table td,.data-table.sales-table th.num,.data-table.sales-table td.num { text-align:center; }.data-table.sales-table input { text-align:center; }
.table-wrap:has(#sales-body) th,.table-wrap:has(#sales-body) td,.table-wrap:has(#sales-body) th.num,.table-wrap:has(#sales-body) td.num { text-align:center; }.table-wrap:has(#sales-body) input { text-align:center; }
.status-pill { padding:4px 9px;border-radius:999px;font-size:11px; }.status-pill.ongoing,.status-pill.active { background:#e7f7ee;color:#13764a; }.status-pill.ended,.status-pill.disabled { background:#eeeae6;color:#726b64; }.status-pill.deleted { background:#fff0ee;color:var(--red); }
.link-button { padding:4px 6px;border:0;background:transparent;color:#d95700;font-size:12px; }.link-button.red { color:var(--red); }
.form-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:15px; }.form-grid.two { grid-template-columns:1fr 1fr; }.form-grid label { color:#6d665f;font-size:12px; }
.tabs { margin-bottom:18px;display:flex;gap:7px;border-bottom:1px solid var(--line); }.tab-button { padding:12px 14px;border:0;border-bottom:2px solid transparent;background:transparent;color:#68615b;font-size:13px; }.tab-button.active { border-color:var(--orange);color:#d95600;font-weight:800; }
.project-context { margin-bottom:18px;display:flex;align-items:center;justify-content:space-between; }.project-context h2 { margin:0;font-size:22px; }.project-context p { margin:5px 0 0;color:var(--muted);font-size:12px; }
.notice { margin:14px 0;padding:11px 13px;border-radius:9px;background:#fff5eb;color:#94430d;font-size:12px;line-height:1.55; }.notice.info { background:#eef6ff;color:#285a83; }.empty { padding:45px;text-align:center;color:var(--muted); }
.inline-form { display:flex;gap:9px;align-items:end; }.inline-form label { min-width:160px;color:#6d665f;font-size:12px; }.inline-form button { margin-bottom:1px; }
.split { display:grid;grid-template-columns:1.1fr .9fr;gap:18px; }.preview-phone { max-width:360px;margin:auto;padding:22px;border:9px solid #28231f;border-radius:30px;background:#f7f5f1; }.preview-phone h3 { margin:8px 0 15px; }.preview-block { margin:10px 0;padding:12px;border-radius:10px;background:white;font-size:12px; }.preview-block strong { float:right; }
.region-grid { display:grid;grid-template-columns:1fr 1fr;gap:14px; }.region-grid label { color:#6d665f;font-size:12px; }
.dropzone { padding:30px;border:2px dashed #d9d1c8;border-radius:13px;background:#faf8f5;text-align:center; }.dropzone input { width:auto;height:auto;border:0;box-shadow:none; }.import-summary { margin-top:16px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px; }.import-summary .metric { background:#faf8f5; }
.checkbox-line { margin:16px 0;display:flex;align-items:center;gap:9px;font-size:12px; }.checkbox-line input { width:16px;height:16px;margin:0; }
dialog { width:min(560px,90vw);padding:0;border:0;border-radius:15px;box-shadow:0 24px 80px rgba(0,0,0,.28); }dialog::backdrop { background:rgba(20,17,14,.52); }.modal-body { padding:25px; }.modal-body h2 { margin:0 0 20px; }.modal-actions { margin-top:20px;display:flex;justify-content:flex-end;gap:9px; }
.toast { position:fixed;right:28px;bottom:28px;z-index:50;max-width:430px;padding:13px 17px;border-radius:9px;background:#191714;color:white;box-shadow:0 12px 40px rgba(0,0,0,.25);font-size:13px; }
@media(max-width:1180px){.form-grid{grid-template-columns:1fr 1fr}.metric-grid{grid-template-columns:repeat(3,1fr)}.split{grid-template-columns:1fr}.preview-phone{margin-left:0}}