:root{
  --bg:#07152d;
  --bg2:#0d1f3f;
  --panel:#0f1d38;
  --panel2:#102345;
  --line:#213763;
  --text:#eef4ff;
  --muted:#a9badb;
  --primary:#2f6df6;
  --primary2:#3e7cff;
  --good:#28c76f;
  --danger:#ff5d73;
  --warn:#ffb020;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,Arial,sans-serif;background:linear-gradient(180deg,var(--bg),#081224 60%,#07111f);color:var(--text)}
a{color:inherit;text-decoration:none}
.layout{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
.sidebar{background:rgba(8,19,40,.88);border-right:1px solid var(--line);padding:18px 16px;position:sticky;top:0;height:100vh;overflow:auto}
.brand{font-size:34px;font-weight:800;margin:4px 0 18px}
.brand small{display:block;font-size:12px;color:var(--muted);font-weight:500;margin-top:4px}
.nav-group{margin-top:20px}
.nav-title{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:14px 10px}
.nav a{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;color:#dfe9ff;margin:4px 0;border:1px solid transparent}
.nav a:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.04)}
.nav a.active{background:linear-gradient(180deg,rgba(47,109,246,.23),rgba(47,109,246,.10));border-color:rgba(90,144,255,.34)}
.main{padding:22px 26px 30px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}
.topbar-right{display:flex;align-items:center;gap:16px}
.user-chip{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.04);border:1px solid var(--line);padding:8px 12px;border-radius:999px}
.avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;background:#132b56;border:1px solid var(--line)}
.avatar.lg{width:48px;height:48px}
.avatar.xl{width:72px;height:72px}
.page-title{font-size:24px;font-weight:800;margin:0}
.page-sub{font-size:13px;color:var(--muted);margin-top:4px}
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:linear-gradient(180deg,rgba(16,35,69,.92),rgba(11,24,48,.92));border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.card h2,.card h3{margin:0 0 14px}
.metric-label{font-size:13px;color:var(--muted)}
.metric-value{font-size:20px;font-weight:800;margin-top:4px}
.progress{height:12px;border-radius:999px;background:#23385f;overflow:hidden}
.progress > span{display:block;height:100%;background:linear-gradient(90deg,var(--good),#5de8a1);border-radius:999px}
.table-wrap{overflow:auto;border-radius:16px;border:1px solid var(--line)}
table{width:100%;border-collapse:collapse}
thead th{font-size:13px;text-align:left;color:#cdd9f5;background:rgba(255,255,255,.03);padding:12px 14px;position:sticky;top:0}
tbody td{padding:12px 14px;border-top:1px solid rgba(255,255,255,.06);vertical-align:top}
tbody tr:hover{background:rgba(255,255,255,.025)}
td .muted, .muted{color:var(--muted)}
td.nowrap{white-space:nowrap}
.badge{display:inline-block;padding:5px 10px;border-radius:999px;background:rgba(47,109,246,.15);border:1px solid rgba(47,109,246,.35);font-size:12px}
form{display:block}
.field{display:flex;flex-direction:column;gap:6px}
label{font-size:13px;color:#dbe5fa}
input,select,textarea,button{font:inherit}
input,select,textarea{width:100%;background:#09172f;color:var(--text);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
textarea{min-height:110px;resize:vertical}
button,.btn{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(180deg,var(--primary2),var(--primary));border:0;color:white;padding:12px 16px;border-radius:12px;font-weight:700;cursor:pointer}
.btn.secondary{background:transparent;border:1px solid var(--line);color:var(--text)}
.btn.danger{background:linear-gradient(180deg,#ff6f83,#ff4d68)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.checkbox-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px}
.checkbox-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid rgba(255,255,255,.05);border-radius:12px;background:rgba(255,255,255,.02)}
.checkbox-row input{width:18px;height:18px}
.empty{padding:28px;text-align:center;color:var(--muted);border:1px dashed rgba(255,255,255,.12);border-radius:16px}
.login-shell{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{width:min(480px,100%);background:linear-gradient(180deg,rgba(16,35,69,.95),rgba(11,24,48,.95));border:1px solid var(--line);border-radius:24px;padding:26px}
.alert{padding:14px 16px;border-radius:14px;border:1px solid}
.alert.error{background:rgba(255,93,115,.08);border-color:rgba(255,93,115,.28);color:#ffdbe1}
.hero-celebration{display:grid;grid-template-columns:80px 1fr 340px;gap:18px;align-items:center}
.video-box{width:100%;height:190px;background:#000;border-radius:18px;overflow:hidden}
small.kpi-note{display:block;color:var(--muted);margin-top:8px}
@media (max-width: 1100px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:relative;height:auto}
  .grid-4,.grid-3,.grid-2,.form-grid,.form-grid-3,.hero-celebration,.checkbox-grid{grid-template-columns:1fr}
}

.brand--logo{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.brand-logo{max-width:220px;width:100%;height:auto;display:block;filter:drop-shadow(0 10px 24px rgba(0,0,0,.2))}
.login-brand-wrap{text-align:center;margin-bottom:18px}
.login-logo{max-width:320px;width:100%;height:auto;display:block;margin:0 auto 14px}
.tasks-board{align-items:start}
.task-column{display:flex;flex-direction:column;gap:14px;min-height:100%}
.task-card{border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:14px;background:rgba(255,255,255,.02)}
.task-meta{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-bottom:10px}
.task-text{font-size:15px;font-weight:700;line-height:1.45;margin-bottom:8px}
.login-card .brand{margin-bottom:8px}
.alert.success{background:rgba(40,199,111,.10);border-color:rgba(40,199,111,.35);color:#e7fff1}
.task-card{position:relative;padding-top:48px}
.task-meta--top{padding-right:108px}
.task-status-pill{position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;justify-content:center;min-width:90px;padding:7px 12px;border-radius:12px;font-size:12px;font-weight:800;color:#fff;box-shadow:0 10px 22px rgba(0,0,0,.18)}
.task-status-pill--done{background:var(--good)}
.task-status-pill--pending{background:var(--warn)}
.task-status-pill--cancelled{background:var(--danger)}
.task-card--done{border-color:rgba(40,199,111,.30)}
.task-card--pending{border-color:rgba(255,176,32,.28)}
.task-card--cancelled{border-color:rgba(255,93,115,.28)}
.task-tools{margin-top:12px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.02)}
.task-tools summary{cursor:pointer;list-style:none;padding:12px 14px;font-weight:700}
.task-tools summary::-webkit-details-marker{display:none}
.task-tools[open]{padding-bottom:14px}
.task-tools[open] summary{border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:12px}
.task-tools form{padding:0 14px}
.task-notes-list{margin-top:14px;border-top:1px dashed rgba(255,255,255,.12);padding-top:12px}
.task-notes-title{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:8px}
.task-note-item{padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);margin-bottom:8px}
.task-note-item__meta{font-size:12px;color:var(--muted);margin-bottom:4px}
.task-manage-grid textarea{min-height:90px}


/* Celebration popup */
.celebration-overlay.hidden{display:none}
.celebration-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px}
.celebration-backdrop{position:absolute;inset:0;background:rgba(1,7,18,.72);backdrop-filter:blur(7px)}
.celebration-modal{position:relative;width:min(940px,94vw);border-radius:28px;overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:0 25px 70px rgba(0,0,0,.45);background:#081223}
.celebration-media-wrap{position:relative;min-height:520px;background:radial-gradient(circle at center,rgba(255,255,255,.16),rgba(6,16,34,.94) 72%)}
.celebration-video,.celebration-media-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#050b16}
.celebration-media-fallback{background:radial-gradient(circle at center,rgba(76,141,255,.18),rgba(6,16,34,.98) 70%)}
.celebration-video:not([src]),.celebration-video[src=""]{display:none}
.celebration-glow{position:absolute;inset:0;background:radial-gradient(circle at center,rgba(255,255,255,.16),transparent 56%)}
.celebration-info{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px;gap:18px;background:linear-gradient(180deg,rgba(3,7,18,.16),rgba(3,7,18,.5) 70%,rgba(3,7,18,.72))}
.celebration-photo{width:124px;height:124px;border-radius:999px;border:5px solid rgba(255,255,255,.95);box-shadow:0 14px 36px rgba(0,0,0,.35);object-fit:cover;background:#fff}
.celebration-copy{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:720px}
.celebration-kicker{font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72);font-weight:700}
.celebration-copy h2{margin:0;font-size:clamp(34px,6vw,66px);line-height:1.03;color:#fff;font-weight:900}
.celebration-customer{font-size:clamp(18px,2.2vw,30px);font-weight:700;color:rgba(255,255,255,.92)}
.celebration-amount{font-size:clamp(30px,4.4vw,54px);font-weight:900;color:#4cf2d1;text-shadow:0 8px 28px rgba(7, 242, 192, .18)}
@media (max-width:780px){.celebration-modal{width:96vw}.celebration-media-wrap{min-height:420px}.celebration-info{padding:22px}.celebration-photo{width:92px;height:92px}}

.celebration-progress{width:min(420px,80%);height:14px;border-radius:999px;background:rgba(255,255,255,.18);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.18)}
.celebration-progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--good),#5de8a1);transition:width .1s linear}
.celebration-audio-row{display:flex;flex-direction:column;align-items:center;gap:10px;min-height:54px}
.celebration-audio-note{color:rgba(255,255,255,.82);font-size:13px;max-width:560px;text-align:center}
.hidden{display:none !important}


/* Theme switch */
.theme-switch{display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);cursor:pointer;font-weight:700;transition:all .2s ease;box-shadow:0 8px 18px rgba(0,0,0,.12)}
.theme-switch:hover{transform:translateY(-1px);border-color:rgba(97,212,255,.45)}
.theme-switch__option{font-size:12px;line-height:1;white-space:nowrap}
.theme-switch__track{position:relative;width:52px;height:28px;border-radius:999px;background:linear-gradient(180deg,#17325c,#0d203d);border:1px solid rgba(255,255,255,.14);display:inline-flex;align-items:center;padding:3px;box-sizing:border-box}
.theme-switch__thumb{display:block;width:20px;height:20px;border-radius:999px;background:linear-gradient(180deg,#ffffff,#cae0ff);box-shadow:0 4px 10px rgba(0,0,0,.22);transform:translateX(0);transition:transform .2s ease}
body[data-theme='light'] .theme-switch__track{background:linear-gradient(180deg,#d9eef3,#b9dde7);border-color:#b7d7df}
body[data-theme='light'] .theme-switch__thumb{transform:translateX(24px);background:linear-gradient(180deg,#0f4b78,#1597a8)}
.login-theme-bar{position:fixed;top:18px;right:18px;z-index:20}

/* Light theme */
body[data-theme='light']{
  --bg:#edf2f6;
  --panel:#ffffff;
  --panel2:#f5f9fc;
  --text:#13263f;
  --muted:#5f6f84;
  --line:#d7e2eb;
  --primary:#123f68;
  --primary2:#0f6d88;
  --good:#1fa86f;
  --warn:#ef9c16;
  --danger:#db5b68;
  background:linear-gradient(180deg,#edf2f6,#e5edf4 62%,#dbe7f0);
}
body[data-theme='light'] .sidebar{
  background:linear-gradient(180deg,#ffffff,#f4f9fc);
  border-right-color:#d7e2eb;
  box-shadow:0 18px 36px rgba(18,38,63,.08);
}
body[data-theme='light'] .nav-title,
body[data-theme='light'] .nav a,
body[data-theme='light'] .brand small{color:#35506e}
body[data-theme='light'] .nav a:hover{background:rgba(15,109,136,.06);border-color:rgba(15,109,136,.1)}
body[data-theme='light'] .nav a.active{background:linear-gradient(180deg,rgba(15,109,136,.14),rgba(34,197,213,.1));border-color:rgba(15,109,136,.18);color:#0f4b78}
body[data-theme='light'] .card,
body[data-theme='light'] .login-card{
  background:linear-gradient(180deg,#ffffff,#f7fbfe);
  border-color:#d7e2eb;
  box-shadow:0 16px 34px rgba(18,38,63,.08);
}
body[data-theme='light'] .user-chip,
body[data-theme='light'] .theme-switch,
body[data-theme='light'] .task-tools,
body[data-theme='light'] .task-note-item,
body[data-theme='light'] .checkbox-row{background:rgba(255,255,255,.92);border-color:#d7e2eb;box-shadow:0 8px 18px rgba(18,38,63,.05)}
body[data-theme='light'] input,
body[data-theme='light'] select,
body[data-theme='light'] textarea{background:#fff;color:#13263f;border-color:#cad9e5}
body[data-theme='light'] label,
body[data-theme='light'] .page-sub,
body[data-theme='light'] .metric-label,
body[data-theme='light'] .muted,
body[data-theme='light'] .mini-note,
body[data-theme='light'] .task-meta,
body[data-theme='light'] .task-note-item__meta,
body[data-theme='light'] .task-notes-title,
body[data-theme='light'] small.kpi-note{color:#5f6f84 !important}
body[data-theme='light'] .table-wrap{border-color:#d7e2eb}
body[data-theme='light'] thead th{background:#eef5fa;color:#46607b}
body[data-theme='light'] tbody td{border-top:1px solid rgba(19,38,63,.08)}
body[data-theme='light'] tbody tr:hover{background:rgba(15,109,136,.04)}
body[data-theme='light'] .progress{background:#d9e6ef}
body[data-theme='light'] .empty{border-color:#cbd9e5;background:rgba(255,255,255,.75)}
body[data-theme='light'] .badge{background:rgba(15,109,136,.08);border-color:rgba(15,109,136,.16);color:#0f4b78}
body[data-theme='light'] .btn.secondary{background:#fff;border-color:#cad9e5;color:#16304f}
body[data-theme='light'] .bar{background:#dbe7ef}
body[data-theme='light'] .bar span{background:linear-gradient(90deg,#123f68,#18c3c6)}
body[data-theme='light'] .task-card{background:linear-gradient(180deg,#ffffff,#f8fbfe);border-color:#d7e2eb;box-shadow:0 10px 20px rgba(18,38,63,.05)}
body[data-theme='light'] .task-card--done{border-color:rgba(31,168,111,.32)}
body[data-theme='light'] .task-card--pending{border-color:rgba(239,156,22,.35)}
body[data-theme='light'] .task-card--cancelled{border-color:rgba(219,91,104,.34)}
body[data-theme='light'] .alert.error{background:#fff3f4;color:#9e3342;border-color:#f2c7ce}
body[data-theme='light'] .alert.success{background:#eefcf5;color:#166d49;border-color:#bfe8d0}
body[data-theme='light'] .brand-logo{filter:none}
body[data-theme='light'] .celebration-modal{border-color:rgba(255,255,255,.5)}


/* CRM light theme normalization */
body.crm-page[data-theme='light'] .crm-card,
body.crm-page[data-theme='light'] .crm-shell .crm-card,
body.crm-page[data-theme='light'] .crm-wrap .crm-card{
  background:linear-gradient(180deg,#ffffff,#f7fbfe) !important;
  border:1px solid #d7e2eb !important;
  box-shadow:0 14px 30px rgba(18,38,63,.08) !important;
}
body.crm-page[data-theme='light'] .crm-title,
body.crm-page[data-theme='light'] .crm-shell,
body.crm-page[data-theme='light'] .crm-wrap,
body.crm-page[data-theme='light'] .crm-table,
body.crm-page[data-theme='light'] .crm-table td,
body.crm-page[data-theme='light'] .crm-table th,
body.crm-page[data-theme='light'] .crm-field,
body.crm-page[data-theme='light'] .crm-field label,
body.crm-page[data-theme='light'] .crm-topline,
body.crm-page[data-theme='light'] .toolbar,
body.crm-page[data-theme='light'] .section-head,
body.crm-page[data-theme='light'] .stats .v,
body.crm-page[data-theme='light'] .meta-item .v,
body.crm-page[data-theme='light'] .stat .v,
body.crm-page[data-theme='light'] .empty-box,
body.crm-page[data-theme='light'] .loadmore-wrap,
body.crm-page[data-theme='light'] .badge-lite,
body.crm-page[data-theme='light'] .open-btn{
  color:#17304f !important;
}
body.crm-page[data-theme='light'] .muted,
body.crm-page[data-theme='light'] .crm-field label,
body.crm-page[data-theme='light'] .stat .k,
body.crm-page[data-theme='light'] .meta-item .k,
body.crm-page[data-theme='light'] .empty-box,
body.crm-page[data-theme='light'] #customers-count,
body.crm-page[data-theme='light'] #products-count,
body.crm-page[data-theme='light'] .toolbar .muted{
  color:#5f6f84 !important;
  opacity:1 !important;
}
body.crm-page[data-theme='light'] .crm-table th,
body.crm-page[data-theme='light'] table.crm-table thead th{
  background:#edf4fa !important;
  color:#38506b !important;
  border-bottom:1px solid #d7e2eb !important;
  box-shadow:none !important;
}
body.crm-page[data-theme='light'] .crm-table tbody td,
body.crm-page[data-theme='light'] table.crm-table tbody td{
  background:#ffffff !important;
  color:#17304f !important;
  border-bottom:1px solid rgba(19,38,63,.08) !important;
}
body.crm-page[data-theme='light'] .crm-table tbody tr:nth-child(even) td{background:#f9fcff !important}
body.crm-page[data-theme='light'] .crm-table tbody tr:hover td,
body.crm-page[data-theme='light'] .crm-table tbody tr:hover{
  background:#eef7fb !important;
}
body.crm-page[data-theme='light'] .crm-table tbody tr.selected td,
body.crm-page[data-theme='light'] .crm-table tbody tr.selected{
  background:rgba(21,151,168,.10) !important;
  outline-color:#1597a8 !important;
}
body.crm-page[data-theme='light'] .table-wrap,
body.crm-page[data-theme='light'] .list-scroll,
body.crm-page[data-theme='light'] .detail-scroll{
  border:1px solid #d7e2eb !important;
  background:#ffffff !important;
}
body.crm-page[data-theme='light'] input,
body.crm-page[data-theme='light'] select,
body.crm-page[data-theme='light'] textarea{
  background:#ffffff !important;
  color:#17304f !important;
  border-color:#cad9e5 !important;
}
body.crm-page[data-theme='light'] input::placeholder,
body.crm-page[data-theme='light'] textarea::placeholder{color:#6c7f95 !important;opacity:1 !important}
body.crm-page[data-theme='light'] .btn-lite,
body.crm-page[data-theme='light'] .open-btn{
  background:#eef4fa !important;
  color:#14385e !important;
  border:1px solid #cad9e5 !important;
  box-shadow:none !important;
}
body.crm-page[data-theme='light'] .btn-lite:hover,
body.crm-page[data-theme='light'] .open-btn:hover{background:#e2eef7 !important}
body.crm-page[data-theme='light'] .columns-menu{
  background:#ffffff !important;
  border:1px solid #d7e2eb !important;
  box-shadow:0 18px 32px rgba(18,38,63,.12) !important;
}
body.crm-page[data-theme='light'] .columns-menu label,
body.crm-page[data-theme='light'] .menu-row,
body.crm-page[data-theme='light'] .columns-menu span{color:#17304f !important}
body.crm-page[data-theme='light'] .stat,
body.crm-page[data-theme='light'] .meta-item,
body.crm-page[data-theme='light'] .badge-lite{
  background:#f7fbfe !important;
  border:1px solid #d7e2eb !important;
  color:#17304f !important;
}
body.crm-page[data-theme='light'] .badge-lite{display:inline-flex;align-items:center}
body.crm-page[data-theme='light'] .multi-trigger,
body.crm-page[data-theme='light'] .ms-trigger,
body.crm-page[data-theme='light'] .chip-box{
  background:#ffffff !important;
  color:#17304f !important;
  border:1px solid #cad9e5 !important;
}
body.crm-page[data-theme='light'] .multi-placeholder,
body.crm-page[data-theme='light'] .ms-placeholder,
body.crm-page[data-theme='light'] .chip-placeholder{color:#6c7f95 !important;opacity:1 !important}
body.crm-page[data-theme='light'] .multi-panel,
body.crm-page[data-theme='light'] .ms-panel,
body.crm-page[data-theme='light'] .chip-dropdown{
  background:#ffffff !important;
  border:1px solid #d7e2eb !important;
  box-shadow:0 18px 32px rgba(18,38,63,.12) !important;
}
body.crm-page[data-theme='light'] .multi-option,
body.crm-page[data-theme='light'] .ms-item,
body.crm-page[data-theme='light'] .chip-option{
  color:#17304f !important;
}
body.crm-page[data-theme='light'] .multi-option:hover,
body.crm-page[data-theme='light'] .ms-item:hover,
body.crm-page[data-theme='light'] .chip-option:hover{background:#eef7fb !important}
body.crm-page[data-theme='light'] .multi-option.active,
body.crm-page[data-theme='light'] .ms-item.selected,
body.crm-page[data-theme='light'] .chip-option.selected{background:rgba(21,151,168,.10) !important}
body.crm-page[data-theme='light'] .chip,
body.crm-page[data-theme='light'] .ms-chip{
  background:#1597a8 !important;
  color:#ffffff !important;
}
body.crm-page[data-theme='light'] .chip button,
body.crm-page[data-theme='light'] .ms-chip button{color:#ffffff !important}
body.crm-page[data-theme='light'] .multi-search,
body.crm-page[data-theme='light'] .ms-search,
body.crm-page[data-theme='light'] .chip-search{
  background:#f7fbfe !important;
  color:#17304f !important;
  border:1px solid #d7e2eb !important;
}
body.crm-page[data-theme='light'] .crm-table .resizer{background:linear-gradient(180deg,transparent,rgba(19,48,79,.10),transparent)}


/* Sales screen improvements */
.sales-bottom-grid{align-items:start}
.sales-entry-form{gap:14px}
.sales-entry-form .field{min-width:0}
.sales-list-scroll{max-height:660px;overflow:auto}
.sales-table thead th{position:sticky;top:0;z-index:2}
.seller-chip{display:flex;align-items:center;gap:10px;min-width:0}
.seller-chip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Responsive layout improvements */
@media (max-width: 1400px){
  .layout{grid-template-columns:220px 1fr}
  .main{padding:18px 18px 24px}
}
@media (max-width: 1180px){
  .grid-3{grid-template-columns:1fr}
  .grid-2,.sales-bottom-grid{grid-template-columns:1fr}
  .topbar{align-items:flex-start;flex-direction:column}
  .topbar-right{width:100%;justify-content:flex-end;flex-wrap:wrap}
}
@media (max-width: 980px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:relative;top:auto;height:auto;max-height:none;border-right:0;border-bottom:1px solid var(--line)}
  .nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .nav a{margin:0}
  .main{padding:14px}
}
@media (max-width: 760px){
  .nav{grid-template-columns:1fr}
  .page-title{font-size:20px}
  .card{padding:14px}
  .sales-list-scroll{max-height:520px}
}