/* ── NEXTGEN TECHNOLOGIES — SMART DID MATCHER — LIGHT / RGB LIVE THEME ── */
:root {
  --bg:        #f0f4f8;
  --bg2:       #e8edf3;
  --surface:   rgba(255,255,255,0.85);
  --surface2:  rgba(255,255,255,0.95);
  --surface3:  #ffffff;
  --border:    rgba(0,0,0,0.08);
  --border2:   rgba(0,0,0,0.12);
  --border3:   rgba(0,0,0,0.18);
  --accent:    #2563eb;
  --accent2:   #1d4ed8;
  --accent-light: rgba(37,99,235,0.1);
  --gradient1: linear-gradient(135deg, #16a34a, #2563eb, #dc2626);
  --gradient2: linear-gradient(135deg, #2563eb, #16a34a);
  --gradient-live: linear-gradient(270deg, #16a34a, #2563eb, #dc2626, #2563eb, #16a34a);
  --green:     #16a34a;
  --green-light: rgba(22,163,74,0.1);
  --amber:     #d97706;
  --amber-light: rgba(217,119,6,0.1);
  --red:       #dc2626;
  --red-light: rgba(220,38,38,0.08);
  --purple:    #2563eb;
  --purple-light: rgba(37,99,235,0.1);
  --text:      #1e293b;
  --text2:     #475569;
  --text3:     #94a3b8;
  --font:      'Outfit', sans-serif;
  --mono:      'JetBrains Mono', monospace;
  --display:   'Outfit', sans-serif;
  --serif:     'Playfair Display', 'Outfit', serif;
  --gold:      #b8860b;
  --gold-bright: #d4af37;
  --gold-light: rgba(184,134,11,0.10);
  --gold-line: linear-gradient(90deg, transparent, #d4af37, transparent);
  --radius:    12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --shadow:    0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.12);
  --glow:      0 0 0 3px rgba(37,99,235,0.15);
  --trans:     all 0.25s cubic-bezier(0.4,0,0.2,1);
  --spring:    all 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;cursor:default}
body::before{content:'';position:fixed;inset:0;background:
  radial-gradient(ellipse 70% 50% at 15% 10%,rgba(22,163,74,0.06) 0%,transparent 60%),
  radial-gradient(ellipse 60% 45% at 85% 90%,rgba(37,99,235,0.06) 0%,transparent 60%),
  radial-gradient(ellipse 50% 30% at 50% 50%,rgba(220,38,38,0.04) 0%,transparent 60%);
  z-index:0;pointer-events:none;animation:bgShift 20s ease-in-out infinite alternate}
@keyframes bgShift{0%{opacity:1;transform:scale(1)}50%{opacity:0.7;transform:scale(1.05)}100%{opacity:1;transform:scale(1)}}
#bgGrid{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0.4}
#app{position:relative;z-index:1;display:flex;flex-direction:column;min-height:100vh}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(37,99,235,0.2);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:rgba(37,99,235,0.35)}
.display{font-family:var(--display);letter-spacing:-0.02em}
.mono{font-family:var(--mono)}
.label{font-size:11px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--text3)}
/* ── CURSOR GLOW ── */
#cursorGlow{position:fixed;width:280px;height:280px;border-radius:50%;pointer-events:none;z-index:2;background:radial-gradient(circle,rgba(37,99,235,0.08) 0%,transparent 70%);transform:translate(-50%,-50%);transition:opacity 0.3s ease;opacity:0}
/* ── HEADER ── */
#topHeader{position:relative;background:rgba(255,255,255,0.92);backdrop-filter:blur(18px);border-bottom:1px solid var(--border);padding:0 32px;overflow:hidden}
.header-glow{position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--gradient-live);background-size:400% 100%;animation:gradientFlow 8s linear infinite;box-shadow:0 0 10px rgba(37,99,235,0.3)}
@keyframes gradientFlow{0%{background-position:0% 50%}100%{background-position:400% 50%}}
#scopeTrace{position:absolute;left:0;right:0;bottom:0;height:70px;opacity:0.4;pointer-events:none}
.header-inner{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:70px;position:relative;z-index:1}
.brand-logo{width:44px;height:44px;border-radius:12px;object-fit:cover;border:2px solid var(--gold-bright);box-shadow:0 0 20px rgba(212,175,55,0.25),inset 0 0 0 1px rgba(255,255,255,0.4);transition:var(--spring)}
.brand-logo:hover{border-color:rgba(37,99,235,0.5);box-shadow:0 0 30px rgba(37,99,235,0.18);transform:scale(1.06) rotate(-2deg)}
.brand-text-wrap{display:flex;flex-direction:column}
.brand-company{font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;background:var(--gradient1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-size:200% 200%;animation:gradientText 6s ease infinite}
@keyframes gradientText{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.brand-tool{font-family:var(--serif);font-size:19px;font-weight:700;font-style:italic;color:var(--text);letter-spacing:0.005em;line-height:1.2}
.brand-version{font-size:9px;color:var(--text3);letter-spacing:0.08em;text-transform:uppercase;margin-top:1px}
#navbar{position:sticky;top:0;z-index:100;background:rgba(255,255,255,0.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:0 32px;height:52px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-icon{width:34px;height:34px;background:var(--accent);border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:16px;color:#ffffff}
.brand-text{font-family:var(--display);font-size:17px;font-weight:700;color:var(--text)}
.brand-sub{font-size:10px;color:var(--text3);letter-spacing:0.08em;text-transform:uppercase;margin-top:1px}
.nav-right{display:flex;align-items:center;gap:8px}
.btn{position:relative;display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:8px;font-size:13px;font-weight:500;border:none;cursor:pointer;transition:var(--trans);font-family:var(--font);white-space:nowrap;overflow:hidden}
.btn::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,0.35),transparent 60%);opacity:0;transition:opacity 0.3s}
.btn:hover::after{opacity:1}
.btn-ghost{background:var(--surface2);color:var(--text2);border:1px solid var(--border2)}
.btn-ghost:hover{background:var(--surface3);border-color:var(--border3);color:var(--text);transform:translateY(-1px)}
.btn-danger{background:var(--red-light);color:var(--red);border:1px solid rgba(220,38,38,0.25)}
.btn-danger:hover{background:rgba(220,38,38,0.2);border-color:rgba(220,38,38,0.4);box-shadow:0 0 16px rgba(220,38,38,0.2)}
.btn-primary{position:relative;background:var(--gradient2);color:#fff;font-weight:600;border:none;box-shadow:0 2px 12px rgba(37,99,235,0.25);overflow:hidden}
.btn-primary::before{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,0.55),transparent);transform:skewX(-20deg)}
.btn-primary:hover::before{animation:goldSheen 0.9s ease}
@keyframes goldSheen{from{left:-60%}to{left:140%}}
.btn-primary:hover{box-shadow:0 6px 24px rgba(37,99,235,0.35);transform:translateY(-2px)}
.btn-sm{padding:5px 12px;font-size:12px}
.btn-icon{width:34px;height:34px;padding:0;justify-content:center;border-radius:8px}
.user-chip{display:flex;align-items:center;gap:9px;padding:5px 12px 5px 5px;border-radius:99px;border:1px solid var(--border2);cursor:pointer;transition:var(--trans);background:var(--surface)}
.user-chip:hover{border-color:var(--gold-bright);box-shadow:0 0 15px rgba(212,175,55,0.2);transform:translateY(-1px)}
.avatar{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;background:var(--gradient2);color:#fff;flex-shrink:0}
.user-meta .name{font-size:13px;font-weight:600;line-height:1.2;color:var(--text)}
.user-meta .role-tag{display:inline-flex;align-items:center;gap:3px;font-size:9px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:1px 6px;border-radius:4px}
.role-admin{background:rgba(37,99,235,0.1);color:var(--accent)}
.role-user{background:var(--surface2);color:var(--text3)}
.ip-badge{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:10px;border:1px solid var(--border2);font-size:11px;font-family:var(--mono);cursor:pointer;transition:var(--trans);color:var(--text2);background:var(--surface)}
.ip-badge:hover{border-color:var(--accent);color:var(--accent)}
.ip-badge.ok{border-color:rgba(22,163,74,0.3);color:var(--green);background:var(--green-light)}
.ip-badge.blocked{border-color:rgba(220,38,38,0.3);color:var(--red);background:var(--red-light)}
.ip-dot{width:6px;height:6px;border-radius:50%;background:currentColor;animation:pulse 2s infinite;box-shadow:0 0 6px currentColor}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 currentColor}50%{opacity:0.4;box-shadow:0 0 0 4px transparent}}
#tabBar{display:flex;align-items:center;gap:2px;padding:14px 32px 0;border-bottom:1px solid var(--border);overflow-x:auto;background:rgba(255,255,255,0.78);backdrop-filter:blur(8px)}
#tabBar::-webkit-scrollbar{height:0}
.tab{display:flex;align-items:center;gap:7px;padding:10px 18px;border-radius:8px 8px 0 0;font-size:13px;font-weight:500;color:var(--text3);cursor:pointer;transition:var(--trans);border:1px solid transparent;border-bottom:none;white-space:nowrap;position:relative;bottom:-1px}
.tab:hover{color:var(--text);background:var(--surface2);transform:translateY(-1px)}
.tab.active{color:var(--accent);background:var(--surface3);border-color:var(--border);border-bottom-color:var(--bg);font-weight:600;box-shadow:0 -6px 18px -6px rgba(37,99,235,0.18)}
.tab.active::before{content:'';position:absolute;top:-1px;left:12px;right:12px;height:2px;background:var(--gradient1);border-radius:2px}
.tab .badge{font-size:9px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;padding:2px 6px;border-radius:4px}
.badge-amber{background:var(--amber-light);color:var(--amber)}
.badge-blue{background:var(--accent-light);color:var(--accent)}
.tab-icon{font-size:13px}
#main{max-width:1280px;margin:0 auto;padding:24px 32px 48px}
.tc{display:none}
.tc.active{display:block;animation:fadeUp 0.4s cubic-bezier(0.16,1,0.3,1)}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px) scale(0.99)}to{opacity:1;transform:translateY(0) scale(1)}}
.search-wrap{position:relative;background:var(--surface3);border:1px solid var(--border2);border-radius:var(--radius-xl);padding:3px;transition:var(--trans);margin-bottom:16px;box-shadow:0 4px 30px rgba(0,0,0,0.06)}
.search-wrap:focus-within{border-color:var(--accent);box-shadow:var(--glow),0 4px 30px rgba(37,99,235,0.08)}
.search-wrap input{width:100%;background:transparent;border:none;outline:none;font-family:var(--mono);font-size:17px;color:var(--text);padding:16px 56px 16px 22px}
.search-wrap input::placeholder{color:var(--text3);font-family:var(--font);font-size:15px}
.search-icon{position:absolute;right:18px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:18px;pointer-events:none;transition:var(--trans)}
.search-wrap:focus-within .search-icon{color:var(--accent)}
.stats-bar{display:flex;align-items:center;gap:14px;padding:10px 20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:16px}
.stat-item{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text2)}
.stat-num{font-family:var(--mono);font-weight:700;color:var(--accent)}
.stat-div{width:1px;height:16px;background:var(--border)}
.result-card{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:6px;transition:var(--trans);cursor:pointer;gap:12px;animation:fadeUp 0.3s ease both}
.result-card:hover{border-color:var(--accent);box-shadow:0 0 24px rgba(37,99,235,0.1);transform:translateY(-2px)}
.rc-name{font-size:13px;color:var(--text2);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-num{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--accent);padding:4px 12px;background:rgba(37,99,235,0.1);border-radius:8px;flex-shrink:0;transition:var(--trans)}
.result-card:hover .rc-num{background:var(--accent);color:#ffffff}
.rc-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}
.rc-btn{width:30px;height:30px;border-radius:6px;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;transition:var(--trans);background:transparent;color:var(--text3)}
.rc-btn:hover{background:var(--surface2);color:var(--text);transform:scale(1.1)}
.rc-btn.edit:hover{background:var(--amber-light);color:var(--amber)}
.rc-btn.del:hover{background:var(--red-light);color:var(--red)}
.hl{background:rgba(37,99,235,0.14);color:var(--accent);border-radius:2px;padding:0 2px;font-weight:600}
.copy-flash{animation:copyPop 0.35s ease}
@keyframes copyPop{0%{transform:scale(1)}50%{transform:scale(1.03)}100%{transform:scale(1)}}
.empty{text-align:center;padding:60px 20px;display:none}
.empty i{font-size:48px;color:var(--text3);margin-bottom:14px;display:block;opacity:0.4}
.empty h3{font-size:17px;font-weight:600;color:var(--text2);margin-bottom:4px}
.empty p{font-size:13px;color:var(--text3)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:1024px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.grid-3,.grid-2{grid-template-columns:1fr}}
.panel{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;transition:var(--trans);box-shadow:var(--shadow);backdrop-filter:blur(6px);position:relative}
.panel:hover{box-shadow:var(--shadow-md),0 0 0 1px rgba(212,175,55,0.18);border-color:var(--border2)}
.panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.panel-title{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--text)}
.panel-icon{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.icon-blue{background:var(--accent-light);color:var(--accent)}
.icon-green{background:var(--green-light);color:var(--green)}
.icon-amber{background:var(--amber-light);color:var(--amber)}
.icon-red{background:var(--red-light);color:var(--red)}
.icon-purple{background:var(--purple-light);color:var(--purple)}
.field{margin-bottom:14px}
.field label{display:block;font-size:11px;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:var(--text3);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;background:var(--surface2);border:1px solid var(--border2);border-radius:var(--radius);padding:10px 14px;font-size:14px;color:var(--text);font-family:var(--font);outline:none;transition:var(--trans)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);box-shadow:var(--glow);background:var(--surface3)}
.field input::placeholder{color:var(--text3)}
.field select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.field-row{grid-template-columns:1fr}}
.btn-full{width:100%;padding:11px;border:none;border-radius:var(--radius);font-size:14px;font-weight:600;cursor:pointer;font-family:var(--font);transition:var(--trans);display:flex;align-items:center;justify-content:center;gap:8px}
.btn-full-primary{background:var(--gradient2);color:#fff;box-shadow:0 2px 12px rgba(37,99,235,0.2)}
.btn-full-primary:hover{box-shadow:0 6px 24px rgba(37,99,235,0.3);transform:translateY(-2px)}
.btn-full-ghost{background:var(--surface2);color:var(--text2);border:1px solid var(--border2)}
.btn-full-ghost:hover{background:var(--surface3);color:var(--text)}
.btn-full-green{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;box-shadow:0 2px 12px rgba(22,163,74,0.2)}
.btn-full-green:hover{box-shadow:0 6px 24px rgba(22,163,74,0.32);transform:translateY(-2px)}
.btn-full-amber{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;box-shadow:0 2px 12px rgba(245,158,11,0.2)}
.btn-full-amber:hover{box-shadow:0 6px 24px rgba(245,158,11,0.32);transform:translateY(-2px)}
.stat-block{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:18px;display:flex;align-items:center;justify-content:space-between;transition:var(--trans)}
.stat-block:hover{border-color:var(--accent);box-shadow:0 0 20px rgba(37,99,235,0.1);transform:translateY(-2px)}
.stat-block .label{font-size:11px;font-weight:500;color:var(--text3);letter-spacing:0.04em;text-transform:uppercase}
.stat-block .value{font-family:var(--serif);font-size:32px;font-weight:700;color:var(--accent);line-height:1}
.user-item{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);transition:var(--trans)}
.user-item:hover{border-color:var(--border2);box-shadow:var(--shadow);transform:translateX(2px)}
.user-item-left{display:flex;align-items:center;gap:10px}
.user-avatar{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;background:var(--gradient2);color:#fff}
.user-item-name{font-size:13px;font-weight:600}
.user-item-un{font-size:11px;color:var(--text3);font-family:var(--mono)}
.ip-item{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);transition:var(--trans)}
.ip-item:hover{border-color:var(--border2)}
.ip-item span{font-family:var(--mono);font-size:13px;color:var(--text2)}
.ip-remove{width:24px;height:24px;border-radius:5px;border:none;background:transparent;color:var(--text3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:11px;transition:var(--trans)}
.ip-remove:hover{background:var(--red-light);color:var(--red);transform:rotate(90deg)}
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);transition:var(--trans)}
.toggle-row:hover{border-color:var(--border2)}
.toggle-info .toggle-label{font-size:13px;font-weight:500;color:var(--text)}
.toggle-info .toggle-desc{font-size:11px;color:var(--text3);margin-top:1px}
.toggle{position:relative;display:inline-block;width:42px;height:22px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;inset:0;background:rgba(0,0,0,0.15);border-radius:99px;cursor:pointer;transition:var(--trans)}
.toggle-slider::before{content:'';position:absolute;left:3px;top:50%;transform:translateY(-50%);width:16px;height:16px;border-radius:50%;background:#fff;transition:var(--spring);box-shadow:0 1px 3px rgba(0,0,0,0.15)}
.toggle input:checked + .toggle-slider{background:var(--accent)}
.toggle input:checked + .toggle-slider::before{left:calc(100% - 19px)}
#allList{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px;margin-top:16px}
.did-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:var(--trans);gap:10px;animation:fadeUp 0.3s ease both}
.did-card:hover{border-color:var(--accent);box-shadow:0 0 18px rgba(37,99,235,0.1);transform:translateY(-2px)}
.did-num{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--accent)}
.did-name{font-size:12px;color:var(--text2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.did-del{width:26px;height:26px;border-radius:6px;border:none;background:transparent;color:var(--text3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:11px;transition:var(--trans);flex-shrink:0}
.did-del:hover{background:var(--red-light);color:var(--red)}
.bk-item{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;transition:var(--trans)}
.bk-item:hover{border-color:var(--border2);box-shadow:var(--shadow)}
.bk-label{font-family:var(--mono);font-size:12px;color:var(--accent);word-break:break-all}
.bk-meta{font-size:11px;color:var(--text3);margin-top:3px}
.bk-meta span{color:var(--text2)}
.btn-restore{padding:5px 10px;border-radius:6px;border:1px solid var(--amber);background:var(--amber-light);color:var(--amber);font-size:11px;font-weight:700;letter-spacing:0.03em;text-transform:uppercase;cursor:pointer;flex-shrink:0;transition:var(--trans);font-family:var(--font)}
.btn-restore:hover{background:var(--amber);color:#fff}
.log-item{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:9px 12px;display:flex;align-items:flex-start;gap:8px;transition:var(--trans)}
.log-item:hover{border-color:var(--border2)}
.log-dot{width:22px;height:22px;border-radius:5px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:10px;margin-top:1px}
.dot-add{background:var(--green-light);color:var(--green)}
.dot-update{background:var(--amber-light);color:var(--amber)}
.dot-delete{background:var(--red-light);color:var(--red)}
.dot-import{background:var(--accent-light);color:var(--accent)}
.log-num{font-family:var(--mono);font-size:12px;color:var(--accent)}
.log-name{font-size:12px;color:var(--text2)}
.log-was{font-size:11px;color:var(--text3)}
.log-meta{font-size:11px;color:var(--text3);margin-top:2px}
.log-meta span{color:var(--text2)}
.log-badge{font-size:9px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;padding:2px 6px;border-radius:4px;flex-shrink:0}
.activity-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border)}
.activity-item:last-child{border-bottom:none}
.act-icon{width:30px;height:30px;border-radius:7px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px}
.act-text{font-size:12px;color:var(--text2);flex:1}
.act-text strong{color:var(--text);font-weight:600}
.act-time{font-size:11px;color:var(--text3);font-family:var(--mono);flex-shrink:0}
.modal-bg{position:fixed;inset:0;z-index:200;background:rgba(15,23,42,0.4);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:20px}
.modal-bg.open{display:flex;animation:fadeIn 0.25s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{position:relative;background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);border:1px solid var(--border2);border-radius:var(--radius-xl);padding:28px;width:100%;max-width:460px;box-shadow:0 20px 60px rgba(0,0,0,0.15),0 0 40px rgba(37,99,235,0.06);animation:scaleIn 0.35s cubic-bezier(0.34,1.56,0.64,1);max-height:90vh;overflow-y:auto}
.modal::before{content:'';position:absolute;top:0;left:14%;right:14%;height:1px;background:var(--gold-line)}
@keyframes scaleIn{from{transform:scale(0.94) translateY(8px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.modal-title{font-family:var(--serif);font-size:19px;font-weight:700;color:var(--text)}
.modal-close{width:30px;height:30px;border-radius:8px;border:1px solid var(--border2);background:var(--surface2);color:var(--text3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--trans);font-size:13px}
.modal-close:hover{background:var(--red-light);color:var(--red);border-color:rgba(220,38,38,0.3);transform:rotate(90deg)}
#loginModal{background:rgba(15,23,42,0.45)}
#loginModal .modal{max-width:420px;border:1px solid rgba(37,99,235,0.2)}
.login-brand{text-align:center;margin-bottom:28px}
.login-logo{width:72px;height:72px;border-radius:18px;object-fit:cover;margin:0 auto 16px;display:block;border:2px solid var(--gold-bright);box-shadow:0 0 34px rgba(212,175,55,0.3),inset 0 0 0 1px rgba(255,255,255,0.5)}
.login-title{font-family:var(--serif);font-size:25px;font-weight:800;font-style:italic;margin-bottom:3px;background:var(--gradient1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-size:200% 200%;animation:gradientText 6s ease infinite}
.login-tool-name{font-size:15px;font-weight:600;color:var(--text2);margin-top:4px;letter-spacing:0.02em}
.login-sub{font-size:13px;color:var(--text3);letter-spacing:0.02em}
.login-err{font-size:12px;color:var(--red);text-align:center;padding:9px;background:var(--red-light);border-radius:8px;margin-top:10px;display:none;border:1px solid rgba(220,38,38,0.2)}
#toastContainer{position:fixed;bottom:20px;right:20px;z-index:999;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.toast{display:flex;align-items:center;gap:8px;padding:10px 16px;background:linear-gradient(135deg,#ffffff,#f8fafc);border:1px solid var(--border2);border-radius:var(--radius);box-shadow:var(--shadow-lg);font-size:13px;font-weight:500;pointer-events:all;cursor:pointer;animation:toastIn 0.3s cubic-bezier(0.34,1.56,0.64,1);min-width:240px;max-width:340px;color:var(--text)}
@keyframes toastIn{from{transform:translateX(105%) scale(0.96);opacity:0}to{transform:translateX(0) scale(1);opacity:1}}
.toast.out{animation:toastOut 0.2s ease forwards}
@keyframes toastOut{to{transform:translateX(105%);opacity:0}}
.toast-ok{border-left:3px solid var(--green);box-shadow:var(--shadow-lg),0 0 16px rgba(22,163,74,0.12)}
.toast-err{border-left:3px solid var(--red);box-shadow:var(--shadow-lg),0 0 16px rgba(220,38,38,0.12)}
.toast-info{border-left:3px solid var(--accent);box-shadow:var(--shadow-lg),0 0 16px rgba(37,99,235,0.12)}
.toast i{font-size:15px;flex-shrink:0}
.toast-ok i{color:var(--green)}
.toast-err i{color:var(--red)}
.toast-info i{color:var(--accent)}
.sec-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.sec-title{font-family:var(--serif);font-size:16px;font-weight:700;display:flex;align-items:center;gap:7px;color:var(--text)}
.sec-title i{font-size:13px;color:var(--accent)}
.sec-count{font-family:var(--mono);font-size:12px;color:var(--text3);background:var(--surface2);padding:2px 8px;border-radius:5px;border:1px solid var(--border)}
.spinner{width:16px;height:16px;border-radius:50%;border:2px solid rgba(37,99,235,0.15);border-top-color:var(--accent);animation:spin 0.6s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.search-prompt{text-align:center;padding:50px 20px;color:var(--text3)}
.search-prompt i{font-size:40px;margin-bottom:14px;display:block;opacity:0.3}
.search-prompt p{font-size:15px}
.search-prompt p strong{color:var(--accent);font-family:var(--mono)}
.divider{height:1px;background:var(--gold-line);opacity:0.5;margin:18px 0}
.danger-zone{border:1px solid rgba(220,38,38,0.25);border-radius:var(--radius);padding:14px;background:var(--red-light)}
.danger-zone p{font-size:12px;color:var(--red);margin-bottom:10px;font-weight:500}
.btn-danger-full{width:100%;padding:9px;border-radius:var(--radius);background:var(--surface);border:1px solid rgba(220,38,38,0.25);color:var(--red);font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font);display:flex;align-items:center;justify-content:center;gap:7px;transition:var(--trans)}
.btn-danger-full:hover{background:var(--red);color:#fff;border-color:var(--red);box-shadow:0 0 16px rgba(220,38,38,0.3)}
.glass{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow)}
.glass-light{background:var(--surface2);border:1px solid var(--border)}
/* ── FOOTER ── */
#appFooter{position:relative;background:rgba(255,255,255,0.92);backdrop-filter:blur(18px);border-top:1px solid var(--border);padding:0 32px}
.footer-glow{position:absolute;top:0;left:0;right:0;height:2px;background:var(--gradient-live);background-size:400% 100%;animation:gradientFlow 8s linear infinite}
.footer-inner{max-width:1400px;margin:0 auto;padding:24px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer-brand{display:flex;align-items:center;gap:12px}
.footer-logo{width:36px;height:36px;border-radius:10px;object-fit:cover;border:1px solid rgba(37,99,235,0.2);opacity:0.8}
.footer-brand-text{font-size:13px;font-weight:600;color:var(--text2)}
.footer-brand-sub{font-size:10px;color:var(--text3);margin-top:2px;letter-spacing:0.03em}
.footer-links{display:flex;align-items:center;gap:20px}
.footer-link{font-size:11px;color:var(--text3);text-decoration:none;transition:var(--trans);letter-spacing:0.02em}
.footer-link:hover{color:var(--accent)}
.footer-right{font-size:11px;color:var(--text3);display:flex;align-items:center;gap:8px}
.footer-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 2s infinite;box-shadow:0 0 6px var(--green)}

/* ── DB HEALTH TAB — flat icon-card grid ── */
.dbh-topbar{display:flex;align-items:stretch;gap:12px;flex-wrap:wrap}
.dbh-banner{flex:1;min-width:260px;display:flex;align-items:center;gap:10px;padding:14px 18px;border-radius:var(--radius-lg);font-size:14px;font-weight:600;transition:var(--trans)}
.dbh-banner-neutral{background:var(--accent-light);color:var(--accent);border:1px solid rgba(37,99,235,0.2)}
.dbh-banner-ok{background:var(--green-light);color:var(--green);border:1px solid rgba(22,163,74,0.25)}
.dbh-banner-err{background:var(--red-light);color:var(--red);border:1px solid rgba(220,38,38,0.25)}
.dbh-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* One card per metric — icon, big value, small label, centered — instead
   of grouped rows. Reuses .stat-block so each card gets the app's
   tilt-on-hover treatment for free. */
#dbhStatGrid.dbh-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:14px;margin-top:20px}
@media(max-width:1400px){ #dbhStatGrid.dbh-grid{grid-template-columns:repeat(8,1fr)} }
@media(max-width:1100px){ #dbhStatGrid.dbh-grid{grid-template-columns:repeat(6,1fr)} }
@media(max-width:860px){  #dbhStatGrid.dbh-grid{grid-template-columns:repeat(4,1fr);gap:12px} }
@media(max-width:600px){  #dbhStatGrid.dbh-grid{grid-template-columns:repeat(3,1fr)} }
@media(max-width:420px){  #dbhStatGrid.dbh-grid{grid-template-columns:repeat(2,1fr)} }
#dbhStatGrid .dbh-stat-card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:0;
  padding:22px 10px;min-width:0;position:relative;overflow:hidden;
  animation:dbhCardIn 0.5s cubic-bezier(0.16,1,0.3,1) both;
  transition:transform 0.45s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.3s ease,border-color 0.3s ease;
}
@keyframes dbhCardIn{from{opacity:0;transform:translateY(16px) scale(0.9)}to{opacity:1;transform:translateY(0) scale(1)}}
#dbhStatGrid .dbh-stat-card::before{
  content:'';position:absolute;inset:0;border-radius:inherit;opacity:0;
  background:radial-gradient(circle at 50% 0%,rgba(37,99,235,0.10),transparent 70%);
  transition:opacity 0.35s ease;pointer-events:none;
}
#dbhStatGrid .dbh-stat-card:hover{border-color:var(--accent);box-shadow:0 10px 28px rgba(37,99,235,0.14);transform:translateY(-3px)}
#dbhStatGrid .dbh-stat-card:hover::before{opacity:1}
#dbhStatGrid .dbh-stat-card .panel-icon{width:32px;height:32px;font-size:13px;margin-bottom:9px;flex-shrink:0;transition:var(--spring)}
#dbhStatGrid .dbh-stat-card:hover .panel-icon{transform:scale(1.18) rotate(-6deg)}
#dbhStatGrid .dbh-stat-value{font-family:var(--mono);font-size:16px;font-weight:800;color:var(--text);line-height:1.25;word-break:break-word;overflow-wrap:anywhere;max-width:100%;transition:var(--trans);position:relative}
#dbhStatGrid .dbh-stat-card:hover .dbh-stat-value{transform:scale(1.05)}
#dbhStatGrid .dbh-stat-label{font-size:9.5px;color:var(--text3);text-transform:uppercase;letter-spacing:0.05em;margin-top:5px;position:relative}
@media(prefers-reduced-motion: reduce){
  #dbhStatGrid .dbh-stat-card{animation:none}
}

.dbh-table{width:100%;border-collapse:collapse;font-size:13px}
.dbh-table thead th{text-align:left;font-size:10px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--text3);padding:8px 12px;border-bottom:1px solid var(--border2)}
.dbh-table tbody td{padding:10px 12px;border-bottom:1px solid var(--border);color:var(--text2)}
.dbh-table tbody tr{transition:background 0.2s ease,transform 0.4s cubic-bezier(0.34,1.56,0.64,1)}
.dbh-table tbody tr:hover{background:var(--surface2);transform:translateX(3px)}
.dbh-table tbody tr:last-child td{border-bottom:none}
.dbh-row{animation:dbhRowFade 0.4s ease both}
@keyframes dbhRowFade{from{opacity:0}to{opacity:1}}
.dbh-format-select{background:var(--surface3);border:1px solid var(--border2);border-radius:6px;padding:5px 8px;font-size:11px;color:var(--text2);font-family:var(--font);cursor:pointer;outline:none;transition:var(--trans)}
.dbh-format-select:focus{border-color:var(--accent)}
@media(prefers-reduced-motion: reduce){
  .dbh-row{animation:none}
}

/* ── SMOOTHNESS PASS: collapsible fields, tactile press feedback, sliding tab pill ── */
.field-collapse{overflow:hidden;transition:max-height 0.38s cubic-bezier(0.4,0,0.2,1),opacity 0.3s ease,margin-bottom 0.38s ease;max-height:80px;opacity:1}
.field-collapse.collapsed{max-height:0;opacity:0;margin-bottom:0;pointer-events:none}
.btn:active{transform:scale(0.96)}
.btn-full:active{transform:scale(0.985)}
.btn-icon:active,.rc-btn:active,.modal-close:active{transform:scale(0.9)}
.result-card:active,.did-card:active,.panel:active{transform:scale(0.997)}
#tabSlider{position:absolute;bottom:-1px;height:2px;background:var(--gradient1);border-radius:2px;transition:left 0.35s cubic-bezier(0.4,0,0.2,1),width 0.35s cubic-bezier(0.4,0,0.2,1);pointer-events:none;opacity:0}
#tabBar{position:relative}
.field input,.field select,.field textarea{transition:var(--trans),box-shadow 0.25s ease}
.btn,.btn-full,.tab,.rc-btn,.did-card,.result-card,.panel{will-change:transform}

/* ── SIGNATURE: LIVE RGB SIGNAL / TILT / REVEAL ENHANCEMENTS ── */
[data-tilt]{ will-change: transform; }
.reveal-init{opacity:0;transform:translateY(18px)}
.reveal-in{animation:revealIn 0.55s cubic-bezier(0.16,1,0.3,1) both}
@keyframes revealIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.live-miss-timer{position:relative;padding-left:12px}
.live-miss-timer::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(22,163,74,0.55);animation:radarPing 1.4s ease-out infinite}
@keyframes radarPing{0%{box-shadow:0 0 0 0 rgba(22,163,74,0.5)}100%{box-shadow:0 0 0 9px rgba(22,163,74,0)}}

@media(max-width:768px){
  #topHeader{padding:0 16px}
  #topHeader .header-inner{height:60px}
  .brand-version{display:none}
  #navbar{padding:0 16px;height:46px}
  #tabBar{padding:10px 16px 0}
  #main{padding:16px 16px 40px}
  .nav-right .ip-badge{display:none}
  .header-cache-label{display:none}
  #btnHeaderCache{padding:7px 10px}
  .field-row{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  #allList{grid-template-columns:1fr}
  .footer-inner{flex-direction:column;text-align:center;gap:14px}
  .footer-links{flex-wrap:wrap;justify-content:center}
  #cursorGlow{display:none}
}
@media(prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}
}


/* ── SKELETON LOADING SYSTEM ── */
.skel{position:relative;overflow:hidden;background:linear-gradient(90deg,rgba(0,0,0,0.06) 25%,rgba(0,0,0,0.10) 37%,rgba(0,0,0,0.06) 63%);background-size:400% 100%;animation:skelShimmer 1.4s ease-in-out infinite;border-radius:var(--radius)}
@keyframes skelShimmer{0%{background-position:100% 0}100%{background-position:0 0}}
.skel-card{height:52px;margin-bottom:6px;border-radius:var(--radius)}
.skel-panel{height:180px;border-radius:var(--radius-lg)}
.skel-line{height:12px;border-radius:6px;margin-bottom:8px}
.skel-line.w60{width:60%}
.skel-line.w80{width:80%}
.skel-line.w40{width:40%}
#bootSkeleton{position:fixed;inset:0;z-index:500;background:var(--bg);display:flex;flex-direction:column;transition:opacity 0.35s ease,visibility 0.35s ease}
#bootSkeleton.hide{opacity:0;visibility:hidden;pointer-events:none}
.boot-header{height:70px;border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 32px;gap:14px}
.boot-tabs{height:52px;border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 32px;gap:10px}
.boot-main{max-width:1280px;margin:0 auto;padding:24px 32px;width:100%;display:flex;flex-direction:column;gap:10px}
.boot-chip{width:120px;height:20px;border-radius:6px}
.boot-tabchip{width:110px;height:32px;border-radius:8px 8px 0 0}
@media(max-width:768px){
  .boot-header,.boot-tabs{padding:0 16px}
  .boot-main{padding:16px}
}
@media(prefers-reduced-motion: reduce){
  .skel{animation:none}
}

/* ── LIQUID GLASS MATERIAL (CSS translation of Apple's Liquid Glass) ──
   True Liquid Glass is a native SwiftUI API and can't run in a browser —
   this is a faithful visual translation of the material itself, applied
   the way Apple's own rule specifies: navigation and controls only
   (header, tab bar, toolbar buttons, sheets/modals). Content — cards,
   tables, lists — stays solid and fully readable, never glassed. */

#topHeader,#navbar,#tabBar{
  background:rgba(255,255,255,0.58) !important;
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
}
#topHeader::after,#tabBar::after{
  content:'';position:absolute;top:0;left:6%;right:6%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.95),transparent);
  pointer-events:none;
}

.tab.active{
  background:rgba(255,255,255,0.65) !important;
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,0.6);
}

/* Glass sheet — modals adopt the material on their surface, per Apple's
   "Sheets with Glass" guidance, while staying opaque enough to read
   clearly over the dimmed backdrop behind them. */
.modal{
  background:linear-gradient(180deg,rgba(255,255,255,0.88) 0%,rgba(248,250,252,0.88) 100%) !important;
  backdrop-filter:blur(20px) saturate(170%);
  -webkit-backdrop-filter:blur(20px) saturate(170%);
}
.modal::after{
  content:'';position:absolute;top:0;left:6%;right:6%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.9),transparent);
  pointer-events:none;
}

/* Glass, interactive buttons — DB Health toolbar. Frosted material, a
   specular top edge, and a shimmer sweep + spring scale on interaction,
   matching Apple's .glassEffect(.interactive()) behavior. */
.dbh-toolbar .btn{
  position:relative;overflow:hidden;
  backdrop-filter:blur(16px) saturate(170%);
  -webkit-backdrop-filter:blur(16px) saturate(170%);
  border:1px solid rgba(255,255,255,0.55);
  transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.3s ease;
}
.dbh-toolbar .btn::before{
  content:'';position:absolute;top:0;left:0;right:0;height:50%;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,0.5),transparent);
  pointer-events:none;
}
.dbh-toolbar .btn:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 8px 20px rgba(0,0,0,0.10)}
.dbh-toolbar .btn:active{transform:translateY(0) scale(0.97)}

@media(prefers-reduced-transparency: reduce){
  #topHeader,#navbar,#tabBar,.tab.active,.modal,.dbh-toolbar .btn{
    backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
    background:var(--surface3) !important;
  }
}