:root{--bg:#f5f7fb;--surface:#fff;--text:#172033;--muted:#778197;--line:#e7ebf2;--primary:#365cf5;--primary-dark:#2749d8;--nav:#111827;--nav-muted:#9ca8bb;--green:#13875e;--shadow:0 8px 28px rgba(28,42,76,.07);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:var(--bg);font-size:14px}.app-shell{min-height:100vh}.sidebar{width:252px;position:fixed;inset:0 auto 0 0;background:var(--nav);color:#fff;display:flex;flex-direction:column;padding:25px 16px 16px;z-index:10}.brand{display:flex;align-items:center;gap:11px;padding:0 9px 31px}.brand-mark{height:39px;width:39px;border-radius:12px;background:linear-gradient(145deg,#5d7cff,#365cf5);display:grid;place-items:center;font-size:13px;font-weight:850;letter-spacing:-.5px;box-shadow:0 5px 15px #365cf54d}.brand strong{display:block;font-size:17px;letter-spacing:-.5px}.brand small{display:block;color:#8d9ab0;font-size:9px;letter-spacing:1.15px;margin-top:3px}.workspace-label,.eyebrow{font-size:10px;font-weight:800;letter-spacing:1.2px;color:#8a95aa}.workspace-label{padding:0 12px 11px}.nav{display:grid;gap:5px}.nav-item{width:100%;display:flex;align-items:center;gap:12px;text-align:left;border:0;border-radius:9px;background:transparent;color:var(--nav-muted);padding:12px 13px;font:inherit;cursor:pointer;transition:.15s}.nav-item:hover{background:#ffffff0c;color:#fff}.nav-item.active{background:#365cf52b;color:#fff;box-shadow:inset 3px 0 #6582ff}.nav-icon{width:18px;text-align:center;font-size:17px}.nav-count{margin-left:auto;border-radius:6px;background:#ffffff13;padding:3px 7px;font-size:11px}.sidebar-bottom{margin-top:auto}.demo-note{display:flex;gap:10px;padding:13px 10px;border:1px solid #ffffff14;border-radius:10px;margin-bottom:14px}.demo-dot{width:8px;height:8px;border-radius:50%;background:#e9b84e;flex:none;margin-top:5px}.demo-note strong,.user-card strong{display:block;font-size:11px}.demo-note small,.user-card small{display:block;color:#8d9ab0;font-size:10px;margin-top:4px;line-height:1.4}.user-card{border-top:1px solid #ffffff16;padding:16px 5px 3px;display:flex;align-items:center;gap:10px}.avatar{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#26364f;color:#bfcfff;font-size:11px;font-weight:800}.user-menu{margin-left:auto;color:#8d9ab0}.main{margin-left:252px;min-height:100vh}.topbar{height:70px;background:#ffffffd9;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 36px;position:sticky;top:0;z-index:5;backdrop-filter:blur(10px)}.breadcrumb{color:#8993a6;font-size:12px}.breadcrumb span{padding:0 10px;color:#c3cad5}.breadcrumb strong{color:#354057;font-weight:650}.topbar-actions{display:flex;align-items:center;gap:12px}.status-pill{display:flex;align-items:center;gap:7px;background:#ecf9f2;color:#187b56;border:1px solid #d7f1e4;border-radius:20px;padding:7px 10px;font-size:11px;font-weight:650}.status-pill i{width:6px;height:6px;background:#21a66f;border-radius:50%}.icon-button{width:32px;height:32px;border:1px solid var(--line);border-radius:9px;background:#fff;color:#59657a;font-size:17px;cursor:pointer}.icon-button:hover{border-color:#b7c3d8;background:#f8faff}.mobile-menu{display:none}.page{display:none;padding:32px 36px 48px;max-width:1500px;margin:0 auto}.page.active{display:block}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:27px}.eyebrow{margin:0 0 9px;color:#7180a0}.page h1{font-size:29px;letter-spacing:-1.05px;margin:0;font-weight:760}.subheading{color:var(--muted);margin:8px 0 0;line-height:1.5}.primary-btn,.secondary-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:9px;padding:11px 15px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:background .15s,border .15s,transform .15s}.primary-btn{background:var(--primary);color:#fff;border:1px solid var(--primary);box-shadow:0 3px 8px #365cf526}.primary-btn:hover{background:var(--primary-dark);transform:translateY(-1px)}.primary-btn span{font-size:17px;font-weight:400;line-height:12px}.secondary-btn{background:#fff;border:1px solid #dfe5ef;color:#48536a}.secondary-btn:hover{background:#f7f9fc;border-color:#c8d1e0}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:25px}.stat-card{background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:19px 20px 17px;box-shadow:0 2px 8px #1d2c4a03}.stat-top{display:flex;align-items:center;justify-content:space-between;color:#6f7a8e;font-size:12px;font-weight:600}.stat-icon{height:34px;width:34px;border-radius:10px;display:grid;place-items:center;font-size:16px}.stat-icon.blue{background:#edf1ff;color:#4565ee}.stat-icon.purple{background:#f3edff;color:#8756d9}.stat-icon.green{background:#e8f8f0;color:#159367}.stat-icon.amber{background:#fff5e5;color:#d18a19}.stat-number{font-size:30px;font-weight:760;letter-spacing:-1px;margin-top:14px}.stat-foot{font-size:10px;color:#98a1b2;margin-top:5px}.panel{background:var(--surface);border:1px solid var(--line);border-radius:13px;box-shadow:0 2px 8px #1d2c4a03;overflow:hidden}.panel-heading{padding:21px 22px;display:flex;align-items:center;justify-content:space-between;gap:15px}.panel-heading h2,.modal h2{margin:0;font-size:16px;letter-spacing:-.3px}.panel-heading p{margin:6px 0 0;color:#8993a5;font-size:11px}.text-btn{background:none;border:0;color:#365cf5;font:inherit;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap}.text-btn span{font-size:15px;padding-left:5px}.table-wrap{width:100%;overflow-x:auto}table{width:100%;border-collapse:collapse;white-space:nowrap}thead{background:#fafbfe}th{text-align:left;padding:12px 22px;color:#8c96a8;font-size:9px;letter-spacing:.75px;font-weight:750;border-top:1px solid #f0f2f7;border-bottom:1px solid #edf0f5}td{padding:15px 22px;border-bottom:1px solid #f0f2f7;color:#48546a;font-size:11px}tbody tr:last-child td{border-bottom:0}tbody tr:hover{background:#fbfcff}.service-code{font-size:11px;font-weight:750;color:#365cf5;cursor:pointer;border:0;background:none;padding:0}.person-cell{display:flex;align-items:center;gap:10px}.person-avatar{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:#edf1ff;color:#5167c5;font-size:10px;font-weight:800;flex:none}.person-info strong{display:block;color:#263149;font-size:11px;font-weight:700}.person-info small{display:block;color:#919bad;font-size:10px;margin-top:4px}.status{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:20px;font-size:10px;font-weight:700}.status:before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}.status-new{background:#edf1ff;color:#4565e8}.status-inspect{background:#fff5e4;color:#b77912}.status-repair{background:#f2ecff;color:#8050c8}.status-parts{background:#fff0e8;color:#c46a31}.status-approval{background:#fff5e4;color:#a9771b}.status-ready{background:#e6f8ef;color:#16845c}.status-delivered{background:#eef2f6;color:#677489}.status-cancelled{background:#fff0f0;color:#c14f57}.row-actions{display:flex;justify-content:flex-end;gap:7px}.mini-btn{border:1px solid #e3e8f0;background:#fff;border-radius:7px;color:#6d7890;padding:6px 9px;font-size:10px;cursor:pointer}.mini-btn:hover{background:#f4f7ff;color:#365cf5}.empty-state{text-align:center;padding:45px 20px 48px}.empty-state.hidden{display:none}.empty-icon{height:45px;width:45px;border-radius:13px;background:#f0f3fa;color:#8a97b1;display:grid;place-items:center;margin:0 auto 14px;font-size:22px}.empty-state strong{display:block;font-size:13px}.empty-state p{color:#8993a5;font-size:11px;margin:7px 0 17px}.tip-banner{display:flex;align-items:center;gap:13px;background:#f0f4ff;border:1px solid #e0e7ff;border-radius:12px;padding:15px 17px;margin-top:19px}.tip-icon{height:31px;width:31px;border-radius:9px;background:#dfe7ff;color:#4565e8;display:grid;place-items:center;flex:none}.tip-banner strong{font-size:11px}.tip-banner p{margin:4px 0 0;font-size:10px;color:#7180a0;line-height:1.5}.banner-close{margin-left:auto;border:0;background:transparent;color:#8a96b0;font-size:20px;cursor:pointer;align-self:flex-start}.toolbar{padding:17px 22px;display:flex;align-items:center;gap:12px;border-bottom:1px solid #edf0f5}.search-box{display:flex;align-items:center;gap:9px;border:1px solid #e2e7f0;background:#fff;border-radius:8px;padding:0 11px;max-width:410px;flex:1;color:#8a96aa}.search-box span{font-size:21px}.search-box input{height:37px;min-width:0;flex:1;border:0;outline:0;font:inherit;font-size:11px;color:var(--text)}select,input,textarea{font:inherit}.toolbar select{height:39px;max-width:210px;border:1px solid #e2e7f0;border-radius:8px;background:#fff;color:#576279;padding:0 10px;font-size:11px;outline-color:#8fa4ff}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.settings-panel{padding-bottom:20px}.form-body{padding:0 22px;display:grid;gap:16px}.form-body label,.form-grid label{display:grid;gap:7px;color:#59647a;font-size:11px;font-weight:650}.form-body input,.form-grid input,.form-grid select,.form-grid textarea{width:100%;border:1px solid #dfe5ef;border-radius:8px;padding:10px 11px;background:#fff;color:#263149;outline-color:#91a5ff;font:inherit;font-size:12px;font-weight:400}.form-body input{height:39px}.form-note{margin:0;color:#13875e;font-size:11px}.settings-actions{padding:0 22px;display:grid;gap:20px}.settings-actions>div:not(.warning-note){border-bottom:1px solid #eef1f6;padding-bottom:16px}.settings-actions strong{font-size:12px}.settings-actions p{font-size:11px;color:#8993a5;line-height:1.5;margin:5px 0 11px}.warning-note{background:#fff8e9;border:1px solid #f6e6bd;padding:13px;border-radius:9px}.warning-note strong{color:#946817}.warning-note p{margin-bottom:0;color:#8b774e}.modal-backdrop{position:fixed;inset:0;background:#11182780;z-index:30;display:grid;place-items:center;padding:20px;backdrop-filter:blur(3px)}.modal-backdrop.hidden{display:none}.modal{width:min(680px,100%);max-height:min(92vh,850px);overflow-y:auto;background:#fff;border-radius:16px;box-shadow:0 24px 80px #0c173a40;padding:24px}.modal-header{display:flex;justify-content:space-between;gap:15px;align-items:flex-start;margin-bottom:22px}.modal-header .eyebrow{margin-bottom:7px}.modal-header .subheading{font-size:11px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}.form-grid .full{grid-column:1/-1}.required{color:#e25261}.form-grid textarea{resize:vertical;min-height:72px}.modal-footer{border-top:1px solid #edf0f5;margin-top:22px;padding-top:17px;display:flex;align-items:center;justify-content:space-between;gap:15px}.required-note{font-size:10px;color:#8c96a8}.modal-footer>div{display:flex;gap:8px}.detail-modal{width:min(650px,100%)}.detail-block{border:1px solid #e9edf4;border-radius:10px;padding:14px;margin-bottom:13px}.detail-block h3{font-size:11px;margin:0 0 12px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.detail-field small{display:block;color:#8993a5;font-size:10px;margin-bottom:5px}.detail-field strong{font-size:12px;line-height:1.5;overflow-wrap:anywhere}.detail-field.full{grid-column:1/-1}.detail-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.detail-actions select{border:1px solid #dfe5ef;border-radius:8px;padding:9px;font-size:11px;flex:1;min-width:160px}.history-item{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid #f0f2f6;font-size:11px}.history-item:last-child{border:0}.history-dot{height:7px;width:7px;background:#5574f5;border-radius:50%;margin-top:4px;flex:none}.history-item small{display:block;color:#8993a5;margin-top:4px}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);background:#172033;color:#fff;border-radius:9px;padding:12px 17px;font-size:12px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.2s;z-index:60;max-width:calc(100vw - 30px)}.toast.show{opacity:1;transform:translate(-50%,0)}.hidden{display:none!important}@media(max-width:1100px){.sidebar{width:220px}.main{margin-left:220px}.page{padding:28px 24px 40px}.topbar{padding:0 24px}.stats-grid{gap:10px}.stat-card{padding:16px}.stat-number{font-size:27px}th,td{padding-left:15px;padding-right:15px}}@media(max-width:820px){.sidebar{transform:translateX(-100%);transition:transform .22s;box-shadow:12px 0 35px #11182724}.sidebar.open{transform:translateX(0)}.main{margin-left:0}.mobile-menu{display:inline-grid;place-items:center;width:32px;height:32px;border:1px solid var(--line);border-radius:8px;background:#fff;color:#59657a;cursor:pointer;margin-right:10px}.topbar{justify-content:flex-start;gap:0;padding:0 17px}.breadcrumb{flex:1}.topbar-actions{margin-left:auto}.page{padding:25px 17px 35px}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.settings-grid{grid-template-columns:1fr}.page-heading{align-items:flex-start}.page h1{font-size:25px}.status-pill{font-size:0;padding:9px}.status-pill i{font-size:initial}.status-pill i{width:7px;height:7px}.tip-banner{align-items:flex-start}}@media(max-width:520px){.topbar{height:60px}.breadcrumb{font-size:10px}.breadcrumb span{padding:0 5px}.topbar-actions{gap:7px}.page{padding-top:21px}.page-heading{flex-direction:column;gap:17px;margin-bottom:21px}.page-heading>.primary-btn{width:100%}.page h1{font-size:24px}.subheading{font-size:12px}.stats-grid{gap:9px}.stat-card{padding:13px;border-radius:10px}.stat-top{font-size:10px;gap:5px}.stat-icon{width:28px;height:28px}.stat-number{font-size:26px;margin-top:11px}.stat-foot{font-size:9px;line-height:1.4}.panel-heading{padding:17px 14px;align-items:flex-start}.panel-heading h2{font-size:14px}.panel-heading p{font-size:10px;line-height:1.4}.text-btn{font-size:10px}.toolbar{padding:12px;flex-direction:column;align-items:stretch}.search-box{max-width:none}.toolbar select{max-width:none;width:100%;height:38px}th{font-size:8px;padding:11px 12px}td{padding:12px;font-size:10px}.modal-backdrop{padding:9px}.modal{padding:18px;border-radius:13px;max-height:95vh}.form-grid{grid-template-columns:1fr;gap:13px}.form-grid .full{grid-column:auto}.modal-footer{align-items:flex-start;flex-direction:column}.modal-footer>div{width:100%}.modal-footer .secondary-btn,.modal-footer .primary-btn{flex:1}.detail-grid{grid-template-columns:1fr 1fr}.detail-field.full{grid-column:1/-1}.tip-banner{padding:12px}.tip-banner p{font-size:10px}.settings-actions,.form-body{padding-left:15px;padding-right:15px}.panel-heading+.form-body{padding-bottom:2px}}

/* Supabase login/registration layer */
.auth-screen{min-height:100vh;display:grid;place-items:center;padding:26px;background:radial-gradient(circle at 12% 0%,#e7edff 0,transparent 34%),radial-gradient(circle at 100% 100%,#e4f6ee 0,transparent 28%),#f5f7fb}
.auth-screen.hidden{display:none!important}.auth-card{width:min(460px,100%);background:#fff;border:1px solid #e4e9f3;border-radius:20px;padding:32px;box-shadow:0 24px 70px #23365b12}
.auth-brand{display:flex;align-items:center;gap:11px;margin-bottom:28px}.auth-brand strong{display:block;font-size:18px;letter-spacing:-.5px}.auth-brand small{display:block;color:#8d9ab0;font-size:9px;letter-spacing:1.1px;margin-top:4px}
.auth-card>.eyebrow{margin:0 0 9px}.auth-card h1{font-size:28px;letter-spacing:-.8px;margin:0}.auth-subtitle{font-size:12px;color:#778197;line-height:1.6;margin:9px 0 22px}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;background:#f2f5fa;border:1px solid #edf0f6;border-radius:10px;padding:4px;gap:4px;margin-bottom:20px}.auth-tab{border:0;background:transparent;border-radius:7px;padding:10px 8px;color:#778197;font:inherit;font-size:12px;font-weight:700;cursor:pointer}.auth-tab.active{background:#fff;color:#365cf5;box-shadow:0 2px 6px #263b610f}.auth-form{display:grid;gap:15px}.auth-form label{display:grid;gap:7px;color:#59647a;font-size:11px;font-weight:650}.auth-form input{height:42px;width:100%;border:1px solid #dfe5ef;border-radius:9px;padding:10px 12px;background:#fff;color:#263149;outline-color:#91a5ff;font:inherit;font-size:12px;font-weight:400}.auth-submit{width:100%;height:43px;margin-top:3px}.auth-submit:disabled{opacity:.65;cursor:wait;transform:none}.auth-message{font-size:11px;line-height:1.6;color:#b14343;min-height:15px;margin:14px 0 0;overflow-wrap:anywhere}.auth-message.success{color:#13875e}.auth-footnote{border-top:1px solid #edf0f5;padding-top:14px;margin:12px 0 0;font-size:10px;line-height:1.6;color:#8792a6}.cloud-note .demo-dot{background:#21a66f}.user-text{min-width:0;flex:1}.user-text strong,.user-text small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:145px}.logout-mini{border:1px solid #ffffff1a;background:#ffffff0a;color:#aebbd0;border-radius:8px;width:28px;height:28px;cursor:pointer;font-size:16px;flex:none}.logout-mini:hover{background:#ffffff16;color:#fff}
@media(max-width:520px){.auth-screen{padding:14px}.auth-card{padding:23px 20px;border-radius:16px}.auth-card h1{font-size:25px}}

/* Safe, read-only-to-cloud demo entry */
.demo-launch-wrap{margin-top:14px;padding-top:14px;border-top:1px solid #edf0f5}
.demo-launch{display:block;width:100%;height:42px;background:#f6f8ff;border-color:#dbe3ff;color:#365cf5;font-weight:750}
.demo-launch:hover{background:#edf1ff;border-color:#cbd6ff}
.demo-launch-note{margin:8px 0 0;text-align:center;color:#8993a5;font-size:10px;line-height:1.55}
.demo-mode-banner{display:none;align-items:center;justify-content:center;gap:8px;padding:9px 14px;background:#fff5d9;color:#78550b;border-bottom:1px solid #f1d88c;font-size:11px;font-weight:700}
.demo-mode-banner.visible{display:flex}
.demo-mode-banner button{border:1px solid #e0c36d;background:#fffaf0;color:#78550b;border-radius:7px;padding:5px 9px;font:inherit;cursor:pointer}

/* ServisTakip v2: oncelik ve teslim tarihi gorunurlugu */
.attention-panel{margin-bottom:20px;overflow:hidden}
.attention-count{display:inline-flex;align-items:center;justify-content:center;min-width:56px;padding:7px 10px;border:1px solid #e3e9f5;border-radius:999px;background:#f7f9fd;color:#57647b;font-size:11px;font-weight:800;white-space:nowrap}
.attention-list{padding:0 20px 6px}
.attention-item{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0;border-top:1px solid #edf0f5}
.attention-item:first-child{border-top:0}
.attention-main{min-width:0;display:grid;gap:5px}
.attention-code-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.attention-main>strong{font-size:12px;color:#202b41}
.attention-main>small{font-size:11px;color:#8590a5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:550px}
.attention-flag{display:inline-flex;align-items:center;border-radius:999px;padding:4px 7px;font-size:9px;font-weight:800;white-space:nowrap}
.overdue-flag{color:#a33b36;background:#fff0ef;border:1px solid #f8d8d5}
.priority-flag{color:#9a6509;background:#fff7e6;border:1px solid #f3e2b5}
.attention-right{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex:none}
.attention-empty{display:flex;align-items:center;gap:12px;margin:0 20px 18px;padding:15px 16px;border-radius:11px;background:#f0faf5;border:1px solid #d8f0e3}
.attention-empty-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:#d9f4e6;color:#13875e;font-weight:900;flex:none}
.attention-empty strong{font-size:12px;color:#176e50}
.attention-empty p{font-size:11px;color:#6f8b7e;margin:4px 0 0;line-height:1.5}
.priority-badge{display:inline-flex;align-items:center;padding:5px 8px;border-radius:7px;font-size:10px;font-weight:800;white-space:nowrap;border:1px solid transparent}
.priority-high{background:#fff0ef;color:#a53b36;border-color:#f7d6d3}
.priority-normal{background:#f3f5fa;color:#667087;border-color:#e5e9f1}
.priority-low{background:#eef7ff;color:#346b9c;border-color:#d9eafa}
.due-date{font-size:10px;color:#637087;white-space:nowrap}
.overdue-date{color:#a53b36;font-weight:800}
@media(max-width:820px){.attention-item{align-items:flex-start}.attention-right{flex-direction:column;align-items:flex-end;gap:7px}.attention-main>small{max-width:45vw}}
@media(max-width:520px){.attention-list{padding:0 13px 5px}.attention-item{gap:9px;padding:12px 0}.attention-main>strong{font-size:11px}.attention-main>small{max-width:50vw;font-size:10px}.attention-right .status{max-width:112px;white-space:normal;text-align:center}.attention-empty{margin:0 13px 14px}.attention-count{font-size:10px;padding:6px 8px}}


/* ServisTakip V3: şifresiz, e-posta OTP giriş ekranı */
.forgot-login-wrap{display:flex;justify-content:center;margin-top:1px}
.forgot-login-btn{font-size:11px;line-height:1.5;text-align:center;padding:2px 4px;color:#365cf5}
.auth-back-btn{width:100%;min-height:40px}
#otpCode{letter-spacing:.35em;font-size:20px;font-weight:800;text-align:center}
#otpVerifyEmail[readonly]{background:#f7f9fc;color:#68758d}

/* ServisTakip UI refresh — clean, confident, beginner-friendly */
:root {
  --bg: #f3f6fc;
  --surface: #ffffff;
  --text: #18243a;
  --muted: #718099;
  --line: #e4eaf4;
  --primary: #4263eb;
  --primary-dark: #304ed0;
  --nav: #101a32;
  --nav-muted: #a8b4ca;
  --green: #16875e;
  --shadow: 0 12px 34px rgba(26, 43, 81, .07);
}
body { background:var(--bg); color:var(--text); }
button, input, select, textarea { font-family:inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:3px solid #8da2ff; outline-offset:2px; }

/* Welcome / login */
.auth-screen {
  min-height:100vh; display:grid; place-items:center; padding:32px 24px;
  background:radial-gradient(ellipse at 9% 10%, rgba(106,131,255,.15), transparent 32%),
             radial-gradient(ellipse at 90% 95%, rgba(87,194,166,.11), transparent 27%), #f3f6fc;
}
.auth-layout { width:min(1200px,100%); margin:auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(365px,445px); gap:28px; align-items:stretch; }
.auth-intro {
  min-height:690px; position:relative; overflow:hidden; isolation:isolate; display:flex; flex-direction:column;
  padding:36px 38px 28px; border-radius:28px; color:#fff;
  background:linear-gradient(145deg,#101a32 0%,#172a58 56%,#3156c7 130%);
  box-shadow:0 26px 70px rgba(21,38,82,.18);
}
.auth-intro:before { content:""; position:absolute; z-index:-1; width:430px;height:430px;right:-165px;top:-170px;border:1px solid #ffffff20;border-radius:50%;box-shadow:0 0 0 36px #ffffff08,0 0 0 75px #ffffff06; }
.auth-intro:after { content:""; position:absolute;z-index:-1;width:350px;height:350px;left:-200px;bottom:-210px;border-radius:50%;background:#496be84a;filter:blur(7px); }
.auth-intro-brand { display:flex;align-items:center;gap:12px; }
.auth-intro-brand .brand-mark { width:44px;height:44px;border-radius:14px;background:linear-gradient(145deg,#94a9ff,#4263eb);color:#fff;box-shadow:0 8px 24px #4263eb55;font-size:14px; }
.auth-intro-brand strong { display:block;font-size:18px;letter-spacing:-.5px; }
.auth-intro-brand small { display:block;margin-top:4px;color:#aebde0;font-size:9px;letter-spacing:1.4px; }
.intro-kicker { display:inline-flex;align-items:center;gap:8px;padding:8px 11px;border:1px solid #ffffff20;border-radius:999px;background:#ffffff0b;color:#d7e0ff;font-size:9px;font-weight:800;letter-spacing:1.2px; }
.intro-kicker-dot { width:7px;height:7px;border-radius:50%;background:#61dfb2;box-shadow:0 0 0 4px #61dfb21a; }
.auth-intro-copy { margin-top:42px; }
.auth-intro-copy h2 { margin:17px 0 13px;font-size:clamp(31px,3.2vw,43px);line-height:1.12;letter-spacing:-1.7px;font-weight:780; }
.auth-intro-copy h2 em { font-style:normal;color:#9eb2ff; }
.auth-intro-copy p { max-width:470px;margin:0;color:#c0cbe2;font-size:13px;line-height:1.8; }
.intro-features { display:grid;grid-template-columns:1fr;gap:13px;margin-top:27px; }
.intro-feature { display:flex;align-items:center;gap:12px; }
.intro-feature-icon { flex:none;width:34px;height:34px;border:1px solid #ffffff20;border-radius:11px;background:#ffffff0c;display:grid;place-items:center;color:#aebfff;font-size:15px;font-weight:800; }
.intro-feature strong { display:block;font-size:11px;font-weight:750;color:#f7f9ff; }
.intro-feature small { display:block;margin-top:4px;color:#aebbd4;font-size:10px;line-height:1.45; }
.intro-preview { margin-top:auto;padding:15px 16px 13px;border:1px solid #ffffff24;border-radius:18px;background:linear-gradient(135deg,#ffffff12,#ffffff07);box-shadow:0 15px 40px #080f2630;backdrop-filter:blur(8px); }
.intro-preview-top { display:flex;justify-content:space-between;align-items:center;color:#c6d3f1;font-size:8px;font-weight:850;letter-spacing:1.15px; }
.intro-preview-top>div { display:flex;align-items:center;gap:7px; }
.preview-live-dot { width:6px;height:6px;border-radius:50%;background:#63dfb6; }
.preview-chip { padding:5px 8px;border:1px solid #ffffff1b;border-radius:7px;color:#d6e0f7;font-size:8px;letter-spacing:0;font-weight:650; }
.preview-stats { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:13px 0; }
.preview-stats>div { border:1px solid #ffffff12;border-radius:10px;background:#0a153324;padding:10px 11px; }
.preview-stats small,.preview-stats span { display:block;color:#aebbd4;font-size:8px; }
.preview-stats strong { display:block;margin:5px 0 2px;color:#fff;font-size:22px;letter-spacing:-.6px; }
.preview-work { display:flex;align-items:center;gap:9px;padding:9px 0;border-top:1px solid #ffffff14; }
.preview-device-icon { display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:9px;background:#6c8aff26;color:#b9c8ff;font-size:13px; }
.preview-device-icon.violet { background:#b08cff25;color:#d5baff; }
.preview-work-copy { min-width:0;flex:1; }
.preview-work-copy strong { display:block;color:#f5f7ff;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.preview-work-copy small { display:block;margin-top:3px;color:#aebbd4;font-size:9px; }
.preview-status { padding:5px 7px;border-radius:7px;background:#7a9cff22;color:#dbe4ff;font-size:8px;white-space:nowrap; }
.preview-status.waiting { background:#e7bd6820;color:#f7d99b; }
.intro-foot { display:flex;align-items:center;gap:8px;margin-top:18px;color:#aebbd4;font-size:9px; }
.intro-foot span { color:#62dcb2;font-size:11px; }
.auth-card { align-self:center;width:100%;padding:34px 32px 26px;border:1px solid #e5eaf4;border-radius:24px;background:rgba(255,255,255,.97);box-shadow:0 22px 65px rgba(28,43,78,.10); }
.auth-card .auth-brand { display:none; }
.auth-card>.eyebrow { margin-bottom:9px;color:#6479c9;font-size:9px; }
.auth-card h1 { font-size:30px;line-height:1.16;letter-spacing:-1.2px;color:#18243a; }
.auth-subtitle { margin:10px 0 25px;font-size:12px;line-height:1.7;color:#78859c; }
.auth-tabs { border-radius:11px;background:#f2f5fb;border-color:#e9edf5;padding:4px;margin-bottom:22px; }
.auth-tab { min-height:40px;border-radius:8px;font-size:11px;transition:background .2s,color .2s,box-shadow .2s; }
.auth-tab.active { color:#3455d6;box-shadow:0 2px 8px #20376710; }
.auth-form { gap:15px; }
.auth-form label { gap:8px;color:#43516a;font-size:10px;font-weight:750; }
.auth-form input { height:45px;border-color:#dde5f1;border-radius:10px;padding:0 13px;background:#fbfcff;font-size:12px;transition:border .18s,box-shadow .18s,background .18s; }
.auth-form input:focus { background:#fff;border-color:#7189f4;box-shadow:0 0 0 4px #4263eb13;outline:none; }
.auth-submit { min-height:45px;border-radius:10px;font-size:11px;letter-spacing:.1px;box-shadow:0 8px 18px #4263eb29; }
.auth-submit:hover { box-shadow:0 10px 24px #4263eb38; }
.auth-back-btn { border-radius:10px; }
.forgot-login-wrap { margin-top:12px; }
.forgot-login-btn { font-size:10px;color:#4563dc; }
.auth-message { padding:0 2px; }
.auth-message.success { color:#14845a; }
.demo-launch-wrap { margin-top:18px;padding-top:18px;border-top:1px solid #e9edf5; }
.demo-launch { height:45px;border-radius:10px;background:#f5f7ff;border-color:#dce4ff;color:#3d5cdb;font-size:11px; }
.demo-launch:hover { background:#eef2ff;border-color:#c5d2ff; }
.demo-launch:before { content:"↗";font-size:14px; }
.demo-launch-note { max-width:300px;margin:9px auto 0;font-size:9px;line-height:1.65; }
.auth-footnote { margin-top:17px;padding-top:14px;font-size:9px;line-height:1.7;color:#8995aa; }

/* Dashboard polish */
.sidebar { background:linear-gradient(180deg,#101a32 0%,#121d37 100%);padding:26px 15px 16px;box-shadow:8px 0 26px rgba(22,34,63,.04); }
.brand { padding-bottom:35px; }
.brand-mark { border-radius:13px;background:linear-gradient(145deg,#8298ff,#4263eb);box-shadow:0 7px 18px #4263eb50; }
.nav-item { border-radius:11px;padding:13px 13px;font-size:12px; }
.nav-item.active { background:linear-gradient(90deg,#4263eb38,#4263eb15);box-shadow:inset 3px 0 #8298ff;color:#fff; }
.sidebar-bottom .demo-note { border-radius:12px;background:#ffffff05; }
.main { min-width:0; }
.topbar { height:72px;padding:0 34px;background:rgba(255,255,255,.88);border-color:#e5eaf4; }
.status-pill { padding:8px 12px;border-radius:999px;font-size:10px; }
.page { padding:32px 34px 44px; }
.page-heading { margin-bottom:24px; }
.page h1 { font-size:30px;letter-spacing:-1.1px; }
.eyebrow { color:#6076c8;letter-spacing:1.35px;font-size:9px; }
.subheading { font-size:12px; }
.primary-btn,.secondary-btn { border-radius:10px;padding:12px 16px;font-size:11px; }
.primary-btn { background:linear-gradient(135deg,#4a6af1,#3756db);border-color:#4263eb;box-shadow:0 7px 16px #4263eb25; }
.primary-btn:hover { background:linear-gradient(135deg,#3d5ee5,#2c49c8); }
.secondary-btn { border-color:#dce4f0; }
.stats-grid { gap:14px;margin-bottom:20px; }
.stat-card { position:relative;overflow:hidden;padding:19px 19px 17px;border-color:#e6ebf4;border-radius:16px;box-shadow:0 4px 16px #17274a08;transition:transform .18s,box-shadow .18s,border-color .18s; }
.stat-card:hover { transform:translateY(-2px);border-color:#d6def0;box-shadow:0 12px 26px #17274a0d; }
.stat-top { font-size:11px; }
.stat-icon { width:36px;height:36px;border-radius:12px; }
.stat-number { margin-top:15px;font-size:32px;letter-spacing:-1.3px; }
.stat-foot { font-size:10px; }
.panel { border-color:#e5eaf3;border-radius:16px;box-shadow:0 5px 18px rgba(23,39,73,.035); }
.panel-heading { padding:21px 23px; }
.panel-heading h2 { font-size:15px;letter-spacing:-.35px; }
.panel-heading p { font-size:10px;line-height:1.6; }
.attention-panel { margin-bottom:19px; }
.attention-count { background:#f4f6fb;border-color:#e4eaf5;border-radius:9px; }
.attention-item { padding:15px 2px; }
.attention-empty { border-radius:12px;margin-top:4px; }
.table-wrap { scrollbar-color:#c4cfe3 transparent; }
thead { background:#f8faff; }
th { font-size:9px;padding-top:13px;padding-bottom:13px;letter-spacing:.9px; }
td { padding-top:16px;padding-bottom:16px;font-size:11px; }
.toolbar { gap:10px; }
.search-box,.toolbar select { border-radius:10px; }
.search-box:focus-within { border-color:#9aabf4;box-shadow:0 0 0 3px #4263eb0d; }
.settings-panel { border-radius:16px; }
.tip-banner { border-radius:14px;padding:16px 18px;background:linear-gradient(120deg,#f0f4ff,#f5fbff); }
.tip-banner strong { font-size:11px; }
.tip-banner p { line-height:1.7; }
.modal { border-radius:19px;box-shadow:0 26px 90px #0e1b3a32; }
.modal-header { padding-bottom:3px; }
.form-grid input,.form-grid select,.form-grid textarea { border-radius:9px; }
.toast { border-radius:12px;font-size:11px; }

/* First-use guide keeps an empty account from looking broken */
.onboarding-panel { display:grid;grid-template-columns:175px minmax(0,1fr);gap:25px;align-items:center;margin:0 0 21px;padding:25px;border:1px solid #dfe6f5;border-radius:18px;background:linear-gradient(110deg,#fff 0%,#f6f8ff 68%,#edf2ff 100%);box-shadow:0 7px 22px #203c7b09; }
.onboarding-panel.hidden { display:none!important; }
.onboarding-art { position:relative;display:grid;place-items:center;min-height:154px;overflow:hidden;border-radius:15px;background:linear-gradient(145deg,#eaf0ff,#dce7ff); }
.onboarding-art-orbit { position:absolute;width:105px;height:105px;border:1px solid #7e98f544;border-radius:50%; }
.orbit-one { transform:rotate(25deg) scaleX(1.2); }
.orbit-two { transform:rotate(-35deg) scaleX(.72); }
.onboarding-art-center { display:grid;place-items:center;width:64px;height:64px;border-radius:20px;background:linear-gradient(145deg,#7f97ff,#4263eb);box-shadow:0 12px 25px #4263eb45;color:#fff;font-size:19px;font-weight:900;letter-spacing:-1px;transform:rotate(-5deg); }
.onboarding-art-spark { position:absolute;display:grid;place-items:center;width:28px;height:28px;border-radius:10px;background:#fff;color:#4767e7;box-shadow:0 5px 12px #2749a31c;font-weight:900; }
.spark-one { top:22px;right:25px; }
.spark-two { bottom:22px;left:25px;color:#159a72; }
.onboarding-copy { min-width:0; }
.onboarding-kicker { display:inline-block;color:#4f68d7;font-size:9px;font-weight:850;letter-spacing:1.4px; }
.onboarding-copy h2 { margin:8px 0 7px;font-size:21px;letter-spacing:-.65px;color:#1b2840; }
.onboarding-copy>p { max-width:720px;margin:0;color:#718099;font-size:11px;line-height:1.7; }
.onboarding-steps { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0 20px; }
.onboarding-steps>div { display:grid;grid-template-columns:25px 1fr;column-gap:8px;align-items:center; }
.onboarding-steps>div>span { grid-row:span 2;display:grid;place-items:center;width:25px;height:25px;border-radius:8px;background:#e6ecff;color:#4462de;font-size:10px;font-weight:900; }
.onboarding-steps strong { font-size:10px;color:#35425c; }
.onboarding-steps small { display:block;margin-top:3px;color:#8692a8;font-size:9px;line-height:1.4; }
.onboarding-copy .primary-btn { min-height:42px; }

@media(max-width:1100px) {
  .auth-layout { grid-template-columns:minmax(0,1fr) minmax(340px,420px);gap:20px; }
  .auth-intro { padding:30px; }
  .auth-intro-copy h2 { font-size:35px; }
  .page { padding-left:25px;padding-right:25px; }
  .topbar { padding-left:25px;padding-right:25px; }
  .onboarding-panel { grid-template-columns:135px minmax(0,1fr);gap:20px;padding:20px; }
}
@media(max-width:850px) {
  .auth-screen { padding:18px; }
  .auth-layout { width:min(570px,100%);grid-template-columns:1fr;gap:16px; }
  .auth-intro { min-height:0;padding:25px 26px;border-radius:22px; }
  .auth-intro-copy { margin-top:27px; }
  .auth-intro-copy h2 { font-size:31px; }
  .auth-intro-copy p { max-width:none;font-size:12px; }
  .intro-features { grid-template-columns:1fr 1fr;gap:12px;margin-top:20px; }
  .intro-feature:last-child { display:none; }
  .intro-preview { margin-top:19px; }
  .intro-foot { margin-top:13px; }
  .auth-card { padding:27px 27px 24px;border-radius:22px; }
  .onboarding-panel { grid-template-columns:110px minmax(0,1fr);gap:16px; }
  .onboarding-art { min-height:140px; }
  .onboarding-steps { gap:8px; }
}
@media(max-width:600px) {
  .auth-screen { padding:12px; }
  .auth-layout { gap:12px; }
  .auth-intro { padding:20px;border-radius:19px; }
  .auth-intro-brand .brand-mark { width:36px;height:36px;border-radius:11px; }
  .auth-intro-brand strong { font-size:15px; }
  .auth-intro-brand small { font-size:8px; }
  .auth-intro-copy { margin-top:22px; }
  .auth-intro-copy h2 { margin-top:13px;font-size:29px;letter-spacing:-1px; }
  .auth-intro-copy p { font-size:11px;line-height:1.65; }
  .intro-features { display:none; }
  .intro-preview { padding:11px;margin-top:18px;border-radius:13px; }
  .preview-stats { gap:5px; }
  .preview-stats>div { padding:8px; }
  .preview-stats strong { font-size:19px; }
  .preview-work { gap:7px; }
  .preview-work-copy strong { font-size:9px; }
  .preview-status { font-size:7px;padding:5px; }
  .intro-foot { font-size:8px; }
  .auth-card { padding:22px 19px 20px;border-radius:18px; }
  .auth-card h1 { font-size:25px; }
  .auth-subtitle { margin-bottom:19px; }
  .auth-form { gap:13px; }
  .auth-tabs { margin-bottom:18px; }
  .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:9px; }
  .page { padding:21px 13px 30px; }
  .topbar { height:60px;padding:0 12px; }
  .topbar-actions { gap:6px; }
  .status-pill { padding:7px 8px; }
  .onboarding-panel { grid-template-columns:1fr;padding:16px;gap:14px;border-radius:15px; }
  .onboarding-art { min-height:95px; }
  .onboarding-art-center { width:51px;height:51px;border-radius:16px;font-size:15px; }
  .onboarding-art-orbit { width:80px;height:80px; }
  .onboarding-copy h2 { font-size:18px; }
  .onboarding-steps { grid-template-columns:1fr;gap:11px;margin:15px 0 17px; }
  .onboarding-steps>div { grid-template-columns:25px 1fr; }
  .onboarding-steps small { grid-column:2; }
  .onboarding-copy .primary-btn { width:100%; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important; }
}