:root{
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --text:#0F172A;
  --muted:#64748B;
  --line:#E2E8F0;
  --primary:#1E40AF;
  --primary-dark:#1E3A8A;
  --primary-soft:#EFF6FF;
  --accent:#2563EB;
  --green:#16A34A;
  --green-soft:#DCFCE7;
  --red:#DC2626;
  --red-soft:#FEE2E2;
  --orange:#D97706;
  --orange-soft:#FEF3C7;
  --shadow:0 5px 20px rgba(30,58,138,.07);
  --radius:18px;
}
[data-theme="dark"]{
  --bg:#0F172A;
  --card:#1E293B;
  --text:#F8FAFC;
  --muted:#94A3B8;
  --line:#334155;
  --primary:#3B82F6;
  --primary-dark:#60A5FA;
  --primary-soft:#1E3A8A;
  --accent:#3B82F6;
  --green:#4ADE80;
  --green-soft:#064E3B;
  --red:#F87171;
  --red-soft:#7F1D1D;
  --orange:#FBBF24;
  --orange-soft:#78350F;
  --shadow:0 5px 20px rgba(0,0,0,.3);
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  min-height:100vh;
}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.app{max-width:1200px;margin:auto;padding:18px 16px 92px}
.topbar{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-bottom:18px;position:sticky;top:0;z-index:10;
  padding:8px 0;background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(12px)
}
.brand{display:flex;align-items:center;gap:11px}
.brand-mark{
  width:43px;height:43px;border-radius:14px;background:var(--primary);
  color:white;display:grid;place-items:center;font-size:21px;font-weight:800
}
h1,h2,h3,p{margin-top:0}
h1{font-size:21px;margin-bottom:2px}
h2{font-size:20px;margin-bottom:15px}
h3{font-size:16px;margin-bottom:7px}
.subtitle{color:var(--muted);font-size:12px}
.top-actions{display:flex;gap:8px}
.icon-btn,.nav-btn,.btn,.drawer-btn{
  border:1px solid var(--line);background:var(--card);color:var(--text);
  border-radius:12px;padding:10px 13px;font-weight:650;transition:transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.icon-btn{width:42px;height:42px;padding:0;font-size:18px}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.green{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.danger{background:var(--red);border-color:var(--red);color:#fff}
.btn.small{font-size:12px;padding:8px 10px}
.btn:hover,.icon-btn:hover,.nav-btn:hover{transform:translateY(-1px)}
.btn:active,.icon-btn:active,.nav-btn:active,.drawer-btn:active,.pin-key:active{transform:scale(0.96) translateY(0)}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:15px}
.col-12{grid-column:span 12}.col-8{grid-column:span 8}.col-6{grid-column:span 6}.col-4{grid-column:span 4}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow);
  animation:cardEntrance 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cardEntrance {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.metric{padding:16px;border-radius:15px;background:var(--primary-soft);border:1px solid color-mix(in srgb,var(--primary) 20%,transparent)}
.metric.loss{background:var(--red-soft);border-color:color-mix(in srgb,var(--red) 25%,transparent)}
.metric.neutral{background:var(--orange-soft);border-color:color-mix(in srgb,var(--orange) 25%,transparent)}
.metric-label{font-size:12px;color:var(--muted);margin-bottom:6px}
.metric-value{font-size:24px;font-weight:800}
label{display:block;font-size:12px;color:var(--muted);font-weight:700;margin:0 0 6px}
.field{margin-bottom:13px}
input,select,textarea{
  width:100%;border:1px solid var(--line);border-radius:11px;
  padding:11px 12px;background:var(--bg);color:var(--text);outline:none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
textarea{min-height:92px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.row{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.row.three{grid-template-columns:repeat(3,1fr)}
.toolbar{display:flex;gap:9px;align-items:center;justify-content:space-between;margin-bottom:14px}
.search{flex:1;max-width:390px}
.empty{text-align:center;padding:28px;color:var(--muted)}

.nav{
  position:fixed;bottom:0;left:0;right:0;z-index:20;background:var(--card);
  border-top:1px solid var(--line);display:flex;justify-content:center;gap:6px;padding:9px 10px env(safe-area-inset-bottom)
}
.nav-btn{border:0;background:transparent;min-width:70px;color:var(--muted);font-size:12px;flex:1;max-width:90px;}
.nav-btn.active{background:var(--primary-soft);color:var(--primary);font-weight:700}

.page{display:none}
.page.active{
  display:block;
  animation:pageFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.hidden{display:none!important}

/* Drawer */
.more-drawer {
    position: fixed;
    bottom: -100%;
    left: 0;
    right: 0;
    background: var(--card);
    border-top: 1px solid var(--line);
    border-radius: 24px 24px 0 0;
    z-index: 15;
    padding: 24px 16px 90px;
    box-shadow: 0 -5px 25px rgba(0,0,0,0.15);
    transition: bottom 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.more-drawer.active {
    bottom: 0;
}
.drawer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.drawer-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--bg);
    padding: 12px 4px;
    font-size: 11px;
    gap: 6px;
}

#lockScreen{
  position:fixed;inset:0;z-index:100;background:var(--bg);
  display:none;place-items:center;padding:20px
}
.lock-box{width:min(390px,100%);text-align:center}
.pin-dots{display:flex;justify-content:center;gap:12px;margin:24px 0}
.pin-dot{width:15px;height:15px;border-radius:50%;background:var(--line)}
.pin-dot.filled{background:var(--accent)}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pin-key{height:56px;border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:13px;font-size:19px;font-weight:700}
.pin-error{color:var(--red);min-height:20px;font-size:12px}

/* Generic List Items */
.list-item{
    border:1px solid var(--line);
    border-radius:15px;
    padding:15px;
    background:var(--card);
    margin-bottom:12px;
    transition: box-shadow 0.15s ease;
}
.list-item:hover{
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.list-item-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.list-item-title{font-weight:800;font-size:16px}
.list-item-meta{font-size:12px;color:var(--muted);margin-top:3px}
.list-item-actions{display:flex;gap:7px;flex-wrap:wrap; margin-top:12px;}

@media(max-width:800px){
  .col-8,.col-6,.col-4{grid-column:span 12}
}
@media(max-width:560px){
  .app{padding-left:12px;padding-right:12px}
  .metrics{grid-template-columns:1fr}
  .row,.row.three{grid-template-columns:1fr}
  .toolbar{align-items:stretch;flex-direction:column}
  .search{max-width:none}
  .nav-btn{padding-left:0;padding-right:0}
}

.global-filter-btn {
    position: relative;
}
.global-filter-btn.active-filter::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background: var(--accent);
    border-radius: 50%;
}

/* Tabs */
.tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 8px;
}
.tab {
    border: none;
    background: transparent;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    border-radius: 8px;
}
.tab.active {
    background: var(--primary-soft);
    color: var(--primary);
}

/* Custom Confirm Modal */
.confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: color-mix(in srgb, var(--bg) 80%, transparent);
    backdrop-filter: blur(4px);
    display: grid;
    place-items: center;
    padding: 20px;
    animation: fadeIn 0.2s ease-out;
}

.confirm-box {
    width: min(390px, 100%);
    text-align: center;
    padding: 24px;
    animation: slideUp 0.2s ease-out;
}

.confirm-message {
    font-size: 16px;
    margin-bottom: 24px;
    color: var(--text);
    font-weight: 500;
}

.confirm-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.confirm-buttons .btn {
    flex: 1;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Toast Notifications */
.toast-container {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  width: min(380px, 90vw);
}

.toast {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--line);
  padding: 12px 16px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: toastSlideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast.success {
  border-color: var(--green);
  background: var(--green-soft);
  color: var(--green);
}

.toast.error {
  border-color: var(--red);
  background: var(--red-soft);
  color: var(--red);
}

@keyframes toastSlideDown {
  from { opacity: 0; transform: translateY(-16px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}