:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --bg:#06101d; --panel:#0c1b2e; --line:rgba(151,187,226,.16); --muted:#8fa3bc; --text:#f5f8fc; --blue:#409cff; --green:#5de3af; }
* { box-sizing:border-box; }
html, body, #app { min-width:320px; min-height:100%; margin:0; }
body { min-height:100vh; color:var(--text); background:radial-gradient(circle at 50% -15%, #153356 0, var(--bg) 42%); }
button, input, select { font:inherit; }
button { color:inherit; cursor:pointer; }
svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.eyebrow { color:#76b9ff; font-size:10px; font-weight:850; letter-spacing:.19em; }
.login { width:min(1100px, calc(100% - 40px)); min-height:100vh; margin:auto; display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:clamp(50px,10vw,130px); }
.login h1 { margin:18px 0 24px; font-size:clamp(62px,9vw,108px); line-height:.84; letter-spacing:-.06em; }
.login h1 em { color:transparent; font-style:normal; background:linear-gradient(90deg,#55adff,#626fff); background-clip:text; }
.login section p { max-width:560px; color:#a7b8cc; font-size:18px; line-height:1.7; }
.login-card { padding:40px; border:1px solid var(--line); border-radius:20px; background:linear-gradient(155deg,rgba(18,38,64,.96),rgba(8,21,37,.96)); box-shadow:0 35px 90px rgba(0,0,0,.3); }
.mark { width:52px; height:52px; display:grid; place-items:center; margin-bottom:28px; color:#85c3ff; border:1px solid rgba(91,167,255,.3); border-radius:14px; background:rgba(42,117,206,.12); font-weight:900; }
.login-card h2 { margin:10px 0; font-size:28px; }
.login-card p { color:var(--muted); line-height:1.6; }
.login-card button, .primary { width:100%; min-height:52px; margin-top:18px; border:0; border-radius:10px; background:linear-gradient(105deg,#258feb,#4b60ff); font-weight:800; }
.notice, .form-error { margin-top:16px; padding:11px 13px; color:#ffc1c9; border:1px solid rgba(255,101,122,.25); border-radius:9px; background:rgba(151,34,51,.15); font-size:13px; }
.loading { min-height:100vh; display:grid; place-content:center; justify-items:center; }
.loading h1 { font-size:25px; }
.spinner { width:42px; height:42px; border:3px solid rgba(74,151,237,.17); border-top-color:var(--blue); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.office-shell { min-height:100vh; display:grid; grid-template-columns:250px minmax(0,1fr); }
aside { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:30px 22px; border-right:1px solid var(--line); background:rgba(5,14,25,.82); backdrop-filter:blur(18px); }
.brand { display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none; }
.brand > span { width:40px; height:40px; display:grid; place-items:center; border:1px solid rgba(76,153,255,.35); border-radius:11px; background:rgba(45,124,218,.13); font-weight:900; }
.brand strong, .brand small { display:block; }
.brand small { margin-top:2px; color:var(--muted); font-size:9px; letter-spacing:.18em; text-transform:uppercase; }
nav { margin-top:56px; }
nav a { display:flex; align-items:center; gap:11px; padding:13px 14px; color:#d7e4f3; border:1px solid rgba(78,155,246,.18); border-radius:10px; background:rgba(40,111,196,.1); font-size:13px; font-weight:750; }
nav a svg { color:#73b7ff; }
.secure { display:flex; align-items:center; gap:9px; margin-top:auto; padding:13px; color:#87e8c2; border:1px solid rgba(93,227,175,.16); border-radius:10px; background:rgba(42,145,109,.07); font-size:11px; }
.workspace { width:min(1260px, 100%); margin:0 auto; padding:48px clamp(28px,5vw,70px); }
header { display:flex; align-items:center; justify-content:space-between; gap:30px; }
header h1 { margin:9px 0 0; font-size:clamp(34px,4vw,50px); letter-spacing:-.045em; }
.account { display:flex; align-items:center; gap:12px; }
.account span, .account small { display:block; text-align:right; }
.account span { font-size:12px; font-weight:750; }
.account small { margin-top:2px; color:var(--muted); font-size:9px; letter-spacing:.12em; }
.account button { width:40px; height:40px; display:grid; place-items:center; padding:0; color:#adc0d7; border:1px solid var(--line); border-radius:10px; background:rgba(10,24,42,.7); }
.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:38px 0; }
.metrics article { min-height:112px; display:flex; flex-direction:column; justify-content:center; padding:22px; border:1px solid var(--line); border-radius:14px; background:rgba(12,27,46,.73); }
.metrics span { color:var(--muted); font-size:11px; }
.metrics strong { margin-top:9px; font-size:25px; }
.metrics .online { color:var(--green); }
.toolbar { display:flex; justify-content:space-between; gap:16px; margin-bottom:18px; }
.toolbar label { min-width:260px; display:flex; align-items:center; gap:10px; padding:0 14px; border:1px solid var(--line); border-radius:10px; background:rgba(10,24,42,.75); }
.toolbar label svg { color:#6785a8; }
.toolbar input { width:100%; height:46px; color:var(--text); border:0; outline:0; background:none; }
.toolbar > button { display:flex; align-items:center; gap:8px; padding:0 18px; border:0; border-radius:10px; background:linear-gradient(105deg,#258feb,#4b60ff); font-size:13px; font-weight:800; }
.customer-list { overflow:hidden; border:1px solid var(--line); border-radius:15px; background:rgba(9,22,38,.68); }
.customer-row { width:100%; display:grid; grid-template-columns:auto minmax(190px,1fr) 110px 130px 130px 24px; align-items:center; gap:18px; padding:18px 20px; color:inherit; text-align:left; border:0; border-bottom:1px solid var(--line); background:transparent; transition:background .18s ease,transform .18s ease; }
.customer-row:hover { background:rgba(40,111,196,.1); }
.customer-row:last-child { border-bottom:0; }
.customer-symbol { width:40px; height:40px; display:grid; place-items:center; color:#72b6ff; border-radius:10px; background:rgba(45,123,217,.13); }
.customer-name strong, .customer-name small { display:block; }
.customer-name strong { font-size:14px; }
.customer-name small, .customer-row > span { margin-top:4px; color:var(--muted); font-size:11px; }
.customer-row code { color:#79a8d8; font-size:11px; }
.customer-row .status { color:#d9e5f3; }
.status i { width:6px; height:6px; display:inline-block; margin-right:7px; border-radius:50%; background:var(--green); }
.customer-row.archived { opacity:.64; }
.customer-row.archived .status i { background:#8092a8; }
.row-arrow { color:#6faeff!important; font-size:22px!important; }
.empty { padding:60px; color:var(--muted); text-align:center; }
dialog { width:min(760px,calc(100% - 28px)); max-height:calc(100vh - 32px); padding:0; overflow:auto; color:var(--text); border:1px solid rgba(143,181,223,.22); border-radius:18px; background:#0b1a2c; box-shadow:0 40px 110px rgba(0,0,0,.55); }
dialog::backdrop { background:rgba(2,8,15,.72); backdrop-filter:blur(5px); }
dialog form { padding:30px; }
.dialog-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.dialog-head h2 { margin:8px 0 0; font-size:27px; }
.close { border:0; }
.dialog-head .close { width:38px; height:38px; display:grid; place-items:center; padding:0; color:var(--muted); border:1px solid var(--line); border-radius:9px; background:rgba(8,20,35,.7); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:28px; }
.form-grid label { display:grid; gap:7px; color:#aebdd0; font-size:11px; font-weight:700; }
.form-grid .wide { grid-column:1/-1; }
.form-grid input, .form-grid select, .form-grid textarea { width:100%; min-height:46px; padding:0 13px; color:var(--text); border:1px solid var(--line); border-radius:9px; outline:0; background:#071423; }
.form-grid textarea { padding:12px 13px; resize:vertical; line-height:1.5; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { border-color:rgba(69,153,250,.55); box-shadow:0 0 0 3px rgba(45,126,224,.1); }
.checkbox-label { grid-template-columns:auto 1fr!important; align-items:center; align-self:end; min-height:46px; padding:0 13px; border:1px solid var(--line); border-radius:9px; background:#071423; }
.checkbox-label input { width:17px; min-height:17px; margin:0; accent-color:var(--blue); }
.dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:28px; padding-top:20px; border-top:1px solid var(--line); }
.dialog-actions button { width:auto; min-height:44px; margin:0; padding:0 18px; border-radius:9px; font-size:12px; font-weight:800; }
.dialog-actions .secondary { color:#b7c5d7; border:1px solid var(--line); background:transparent; }
.dialog-actions .primary { border:0; }
.danger-confirm { color:#ffd8dd; border:1px solid rgba(255,102,123,.34); background:rgba(150,34,51,.25); }
.dialog-actions button:disabled { opacity:.6; cursor:wait; }

.back { display:flex; align-items:center; gap:7px; margin:0 0 22px; padding:0; color:#9eb4cc; border:0; background:none; font-size:12px; font-weight:750; }
.back:hover { color:#fff; }
.back svg { width:17px; height:17px; }
.success-banner { margin:24px 0 -14px; padding:12px 15px; color:#9af0ce; border:1px solid rgba(93,227,175,.24); border-radius:10px; background:rgba(42,145,109,.1); font-size:12px; }
.profile-hero { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:38px 0 20px; padding:25px 28px; border:1px solid var(--line); border-radius:15px; background:linear-gradient(125deg,rgba(18,43,73,.9),rgba(9,24,42,.76)); }
.profile-hero code { color:#78b9fb; font-size:12px; font-weight:800; letter-spacing:.12em; }
.profile-hero p { margin:8px 0 0; color:var(--muted); font-size:13px; }
.profile-actions { display:flex; align-items:center; gap:10px; }
.profile-actions button,.section-heading button { min-height:42px; display:flex; align-items:center; gap:8px; padding:0 15px; border-radius:9px; font-size:12px; font-weight:800; }
.secondary-action,.section-heading button { color:#e9f4ff; border:1px solid rgba(77,156,247,.28); background:rgba(40,111,196,.14); }
.archive-action { color:#ffc2ca; border:1px solid rgba(255,102,123,.25); background:rgba(145,35,52,.14); }
.archived-badge,.primary-badge,.count-badge { display:inline-flex; align-items:center; justify-content:center; padding:6px 9px; color:#9fb1c6; border:1px solid var(--line); border-radius:999px; background:rgba(8,20,35,.6); font-size:8px; font-weight:850; letter-spacing:.12em; }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.detail-panel,.note-panel { padding:26px; border:1px solid var(--line); border-radius:15px; background:rgba(11,27,47,.72); }
.detail-panel h2,.content-section h2 { margin:8px 0 22px; font-size:23px; }
.detail-values { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.detail-value span,.project-meta span { display:block; color:#7189a5; font-size:9px; letter-spacing:.1em; text-transform:uppercase; }
.detail-value strong,.project-meta strong { display:block; margin-top:6px; color:#e8f1fb; font-size:12px; }
.quick-links { display:grid; gap:9px; }
.quick-link { min-width:0; display:flex; align-items:center; gap:10px; padding:10px 12px; color:#cfe3f7; border:1px solid rgba(107,160,218,.14); border-radius:9px; background:rgba(5,16,29,.44); text-decoration:none; font-size:11px; }
.quick-link:hover { color:#fff; border-color:rgba(79,158,248,.42); background:rgba(39,104,181,.14); }
.quick-link svg { width:17px; height:17px; flex:0 0 auto; color:#69b2ff; }
.quick-link span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.muted-copy { color:var(--muted); font-size:12px; }
.note-panel { margin-top:16px; }
.note-panel p { margin:12px 0 0; color:#b4c4d7; line-height:1.65; white-space:pre-wrap; }
.content-section { margin-top:38px; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:14px; }
.section-heading h2 { margin-bottom:0; }
.contact-list,.project-list { display:grid; gap:10px; }
.contact-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:15px; padding:17px 18px; border:1px solid var(--line); border-radius:12px; background:rgba(9,22,38,.68); }
.contact-avatar,.project-icon { width:42px; height:42px; display:grid; place-items:center; color:#74b9ff; border-radius:11px; background:rgba(45,123,217,.13); }
.contact-main > div:first-child { display:flex; align-items:center; gap:10px; }
.contact-main strong { font-size:13px; }
.contact-main small { display:block; margin-top:5px; color:var(--muted); font-size:10px; }
.primary-badge { padding:4px 7px; color:#77dcb9; border-color:rgba(84,219,172,.2); background:rgba(43,135,103,.1); font-size:7px; }
.contact-links { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.contact-links .quick-link { padding:6px 8px; }
.contact-actions { display:flex; gap:7px; }
.icon-button { width:38px; height:38px; display:grid; place-items:center; padding:0; color:#a8bdd4; border:1px solid var(--line); border-radius:9px; background:rgba(6,17,30,.65); }
.icon-button:hover { color:#fff; border-color:rgba(79,158,248,.4); }
.icon-button.danger:hover { color:#ff9caa; border-color:rgba(255,102,123,.35); }
.project-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:16px; padding:20px 22px; border:1px solid var(--line); border-radius:12px; background:rgba(9,22,38,.68); }
.project-card > div > strong,.project-card > div > small { display:block; }
.project-card > div > strong { margin-top:7px; font-size:14px; }
.project-card > div > small { max-width:620px; margin-top:6px; color:var(--muted); font-size:10px; line-height:1.5; }
.project-meta { min-width:190px; display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.project-meta .visible { color:var(--green); }
.empty.compact { padding:36px; border:1px dashed var(--line); border-radius:12px; background:rgba(9,22,38,.4); }
.confirm-dialog { width:min(520px,calc(100% - 28px)); }
.confirm-copy { margin:25px 0 4px; color:#aebed0; line-height:1.65; }

@media (max-width:1000px) { .detail-grid { grid-template-columns:1fr; } .project-card { grid-template-columns:auto 1fr; } .project-meta { grid-column:2; } }
@media (max-width:900px) { .office-shell { grid-template-columns:1fr; } aside { position:static; width:100%; height:auto; flex-direction:row; align-items:center; gap:20px; padding:16px 22px; border-right:0; border-bottom:1px solid var(--line); } nav { margin:0 0 0 auto; } .secure { display:none; } .customer-row { grid-template-columns:auto 1fr 100px 24px; } .customer-row .status,.customer-city { display:none; } }
@media (max-width:650px) { .login { grid-template-columns:1fr; padding:50px 0; } .login h1 { font-size:64px; } .workspace { padding:32px 16px; } header { align-items:flex-start; } .account > span { display:none; } .metrics { grid-template-columns:1fr; } .toolbar { flex-direction:column; } .toolbar label, .toolbar > button { width:100%; min-height:46px; } .customer-row { grid-template-columns:auto minmax(0,1fr) 18px; gap:12px; } .customer-row code { grid-column:2; } .customer-row .row-arrow { grid-column:3; grid-row:1/3; } .form-grid { grid-template-columns:1fr; } .form-grid .wide { grid-column:auto; } aside { gap:12px; padding:14px 16px; } .brand div { display:none; } nav a { width:42px; height:42px; justify-content:center; gap:0; padding:0; font-size:0; } nav a svg { width:19px; height:19px; } .profile-hero { align-items:flex-start; flex-direction:column; padding:21px; } .profile-actions { width:100%; } .profile-actions button { flex:1; justify-content:center; } .detail-values { grid-template-columns:1fr; } .detail-panel,.note-panel { padding:21px; } .section-heading { align-items:flex-start; flex-direction:column; } .section-heading button { width:100%; justify-content:center; } .contact-card { grid-template-columns:auto 1fr; } .contact-actions { grid-column:2; } .contact-links { flex-direction:column; } .project-card { grid-template-columns:1fr; } .project-icon { display:none; } .project-meta { min-width:0; grid-column:1; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }