:root {
  --bg-primary: #0a0a0f;
  --bg-secondary: #12121a;
  --bg-card: rgba(255,255,255,0.03);
  --bg-card-hover: rgba(255,255,255,0.06);
  --glass-bg: rgba(255,255,255,0.04);
  --glass-border: rgba(255,255,255,0.06);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.4);
  --gold: #d4a853;
  --gold-light: #e8c56e;
  --gold-dark: #b8892f;
  --silver: #c0c0c0;
  --silver-dark: #8a8a8a;
  --emerald: #2ecc71;
  --emerald-dark: #1a8a4a;
  --red: #e74c3c;
  --orange: #f39c12;
  --blue: #3498db;
  --purple: #9b59b6;
  --text-primary: #f0f0f0;
  --text-secondary: #a0a0b0;
  --text-muted: #6a6a7a;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  --transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family:'Plus Jakarta Sans',sans-serif; background:var(--bg-primary); color:var(--text-primary); min-height:100vh; overflow-x:hidden; }
html { overflow-x:hidden; }
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg-secondary); }
::-webkit-scrollbar-thumb { background:var(--gold-dark); border-radius:3px; }
/* Sidebar - mobile bottom sheet (<600px) */
@media(max-width:599px) {
  .sidebar {
    position:fixed; left:0; right:0; bottom:0; top:auto; max-height:85vh;
    width:auto; height:auto;
    background:var(--bg-secondary); border:none;
    border-top:1px solid var(--glass-border);
    border-radius:20px 20px 0 0; padding:0 0 20px;
    overflow-y:auto; z-index:200;
    transform:translateY(100%); opacity:0; pointer-events:none;
    transition:transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94),opacity 0.25s;
    box-shadow:0 -8px 40px rgba(0,0,0,0.5)
  }
  .sidebar.open { transform:translateY(0); opacity:1; pointer-events:auto }
  .sidebar .logo { display:flex; align-items:center; gap:10px; padding:4px 20px 0; position:sticky; top:0; background:var(--bg-secondary); border-radius:20px 20px 0 0; z-index:1 }
  .sidebar .logo i { font-size:22px; color:var(--gold) }
  .sidebar .logo h2 { font-size:15px; font-weight:700; background:linear-gradient(135deg,var(--gold),var(--gold-light)); -webkit-background-clip:text;-webkit-text-fill-color:transparent; white-space:nowrap }
  .sidebar .logo::before {
    content:''; display:block; width:36px; height:4px; border-radius:2px;
    background:rgba(255,255,255,0.15); margin:0 auto 10px
  }
  .sidebar-footer { display:none }
  .sidebar .divider { margin:8px 16px }
  .nav-list { padding:0 12px }
  .nav-item a { padding:12px 14px; font-size:14px; border-radius:10px; gap:12px }
  [dir="rtl"] .sidebar { left:0; right:0; transform:translateY(100%) }
  [dir="rtl"] .sidebar.open { transform:translateY(0) }
}
/* Sidebar - tablet/desktop overlay (600px+) */
@media(min-width:600px) {
  .sidebar {
    position:fixed; top:0; left:0; width:270px; height:100vh;
    background:var(--bg-secondary);
    border-right:1px solid rgba(255,255,255,0.04);
    padding:20px 12px; overflow-y:auto; z-index:200;
    transform:translateX(-100%);
    transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
  }
  .sidebar.open { transform:translateX(0); }
  .nav-item a.active { border-left:3px solid var(--gold) }
  .sidebar .logo { display:flex; align-items:center; gap:10px; padding:0 8px 24px; }
  .sidebar .logo i { font-size:24px; color:var(--gold); }
  .sidebar .logo h2 { font-size:16px; font-weight:700; background:linear-gradient(135deg,var(--gold),var(--gold-light)); -webkit-background-clip:text;-webkit-text-fill-color:transparent; white-space:nowrap; }
  .sidebar-footer { padding:12px 8px; margin-top:20px; border-top:1px solid rgba(255,255,255,0.06); display:flex; justify-content:center; gap:8px; }
  .sidebar-footer .toggle-btn { background:var(--glass-bg); border:1px solid var(--glass-border); color:var(--text-secondary); width:40px; height:40px; border-radius:50%; cursor:pointer; display:flex;align-items:center;justify-content:center; transition:var(--transition); font-size:16px; }
  .sidebar-footer .toggle-btn:hover { color:var(--gold); border-color:var(--gold); }
  [dir="rtl"] .sidebar { left:auto; right:0; transform:translateX(100%); border-right:none; border-left:1px solid rgba(255,255,255,0.04); }
  [dir="rtl"] .sidebar.open { transform:translateX(0); }
  [dir="rtl"] .nav-item a.active { border-left:none; border-right:3px solid var(--gold) }
}
.nav-list { list-style:none; }
.nav-item { margin-bottom:4px; }
.nav-item a { display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:var(--radius-sm); color:var(--text-secondary); text-decoration:none; transition:var(--transition); font-size:14px; font-weight:500; position:relative; }
.nav-item a:hover { background:var(--bg-card-hover); color:var(--text-primary); }
.nav-item a.active { background:linear-gradient(135deg,rgba(212,168,83,0.12),rgba(212,168,83,0.04)); color:var(--gold) }
.nav-item a i { width:20px; text-align:center; font-size:16px; }
.sidebar .divider { height:1px; background:rgba(255,255,255,0.06); margin:16px 8px; }
/* Main content - always full width */
.main { flex:1; padding:12px 16px; transition:var(--transition); }

/* Topbar */
.topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; flex-wrap:wrap; gap:12px; }
.topbar-left { display:flex; align-items:center; gap:16px; }
.toggle-btn { background:none; border:none; color:var(--text-secondary); font-size:20px; cursor:pointer; padding:8px; border-radius:var(--radius-xs); transition:var(--transition); }
.toggle-btn:hover { color:var(--gold); background:rgba(255,255,255,0.04); }
.mobile-toggle { display:none; }
.topbar h1 { font-size:22px; font-weight:700; }
.topbar-right { display:flex; align-items:center; gap:16px; }
.lang-toggle { background:var(--glass-bg); border:1px solid var(--glass-border); color:var(--text-secondary); padding:8px 16px; border-radius:var(--radius-sm); cursor:pointer; font-size:13px; font-weight:600; transition:var(--transition); }
.lang-toggle:hover { border-color:var(--gold); color:var(--gold); }
.notif-btn { position:relative; background:var(--glass-bg); border:1px solid var(--glass-border); color:var(--text-secondary); width:40px; height:40px; border-radius:50%; cursor:pointer; transition:var(--transition); display:flex;align-items:center;justify-content:center; font-size:16px; text-decoration:none; }
.notif-btn:hover { border-color:var(--gold); color:var(--gold); }
.notif-dot { position:absolute; top:6px; right:6px; width:8px; height:8px; background:var(--red); border-radius:50%; }
.avatar { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--gold-dark),var(--gold)); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; color:#000; cursor:pointer; flex-shrink:0; }
a.avatar { text-decoration:none; }

/* Cards */
.row { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; margin-bottom:24px; }
.card { background:var(--glass-bg); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid var(--glass-border); border-radius:var(--radius); padding:20px 22px; box-shadow:var(--glass-shadow); transition:var(--transition); }
.card:hover { border-color:rgba(255,255,255,0.1); transform:translateY(-2px); }
.card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.card-header h3 { font-size:14px; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.5px; }
.card-header i { color:var(--gold); font-size:18px; }
.card-value { font-size:32px; font-weight:800; line-height:1.2; }
.card-label { font-size:12px; color:var(--text-muted); margin-top:4px; }
.card .trend { font-size:12px; font-weight:600; display:inline-flex; align-items:center; gap:4px; margin-top:8px; padding:2px 8px; border-radius:20px; }
.trend-up { color:var(--emerald); background:rgba(46,204,113,0.1); }
.trend-down { color:var(--red); background:rgba(231,76,60,0.1); }

/* Stat Grid */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:24px; }
.stat-card { background:var(--glass-bg); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid var(--glass-border); border-radius:var(--radius-sm); padding:16px; text-align:center; transition:var(--transition); }
.stat-card:hover { border-color:var(--gold-dark); }
.stat-card i { font-size:24px; margin-bottom:8px; }
.stat-card .stat-value { font-size:20px; font-weight:700; }
.stat-card .stat-label { font-size:11px; color:var(--text-muted); margin-top:4px; }
.stat-card.gold i { color:var(--gold); }
.stat-card.emerald i { color:var(--emerald); }
.stat-card.red i { color:var(--red); }
.stat-card.blue i { color:var(--blue); }
.stat-card.purple i { color:var(--purple); }
.stat-card.orange i { color:var(--orange); }

/* Charts */
.chart-grid { display:grid; grid-template-columns:2fr 1fr; gap:16px; margin-bottom:24px; }
@media(max-width:900px){.chart-grid{grid-template-columns:1fr;}}
.chart-card { background:var(--glass-bg); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid var(--glass-border); border-radius:var(--radius); padding:20px; box-shadow:var(--glass-shadow); }
.chart-card h3 { font-size:14px; font-weight:600; color:var(--text-secondary); margin-bottom:16px; text-transform:uppercase; letter-spacing:0.5px; }
.chart-container { position:relative; height:220px; }

/* Timeline */
.timeline { list-style:none; }
.timeline li { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,0.04); }
.timeline li:last-child { border-bottom:none; }
.timeline .tl-icon { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.tl-icon.gold { background:rgba(212,168,83,0.15); color:var(--gold); }
.tl-icon.emerald { background:rgba(46,204,113,0.15); color:var(--emerald); }
.tl-icon.red { background:rgba(231,76,60,0.15); color:var(--red); }
.tl-icon.blue { background:rgba(52,152,219,0.15); color:var(--blue); }
.tl-icon.orange { background:rgba(243,156,18,0.15); color:var(--orange); }
.timeline .tl-content { flex:1; }
.timeline .tl-content p { font-size:13px; font-weight:500; }
.timeline .tl-content span { font-size:11px; color:var(--text-muted); }

/* Tables */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
th { text-align:left; padding:12px 16px; font-size:12px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; border-bottom:1px solid rgba(255,255,255,0.06); }
td { padding:12px 16px; font-size:13px; border-bottom:1px solid rgba(255,255,255,0.04); }
tr:hover td { background:rgba(255,255,255,0.02); }
.status-badge { padding:4px 12px; border-radius:20px; font-size:11px; font-weight:600; display:inline-block; }
.status-badge.good { background:rgba(46,204,113,0.15); color:var(--emerald); }
.status-badge.warn { background:rgba(243,156,18,0.15); color:var(--orange); }
.status-badge.bad { background:rgba(231,76,60,0.15); color:var(--red); }
.status-badge.info { background:rgba(52,152,219,0.15); color:var(--blue); }
.status-badge.gold { background:rgba(212,168,83,0.15); color:var(--gold); }
.status-badge.blue { background:rgba(52,152,219,0.15); color:var(--blue); }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:var(--radius-sm); font-size:13px; font-weight:600; cursor:pointer; transition:var(--transition); border:none; text-decoration:none; }
.btn-gold { background:linear-gradient(135deg,var(--gold),var(--gold-dark)); color:#000; }
.btn-gold:hover { transform:translateY(-1px); box-shadow:0 8px 24px rgba(212,168,83,0.3); }
.btn-outline { background:transparent; border:1px solid var(--glass-border); color:var(--text-secondary); }
.btn-outline:hover { border-color:var(--gold); color:var(--gold); }
.btn-emerald { background:linear-gradient(135deg,var(--emerald),#1a9c5e); color:#fff; }
.btn-emerald:hover { transform:translateY(-1px); box-shadow:0 8px 24px rgba(46,204,113,0.3); }
.btn-sm { padding:6px 14px; font-size:12px; }
.btn-primary { background:linear-gradient(135deg,var(--gold),var(--gold-dark)); color:#000; }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 8px 24px rgba(212,168,83,0.3); }
.page-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; flex-wrap:wrap; gap:12px; }
.page-head .text-muted { flex:1; min-width:200px; }
@media(max-width:600px){.page-head{flex-direction:column;align-items:stretch;text-align:center;} .page-head .btn,.page-head .btn-gold,.page-head .btn-outline{align-self:center;}}
.top-bar { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; flex-wrap:wrap; gap:12px; }
@media(max-width:600px){.top-bar{flex-direction:column;align-items:stretch;text-align:center;}}

/* Forms */
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:12px; font-weight:600; color:var(--text-secondary); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.5px; }
.form-group input,.form-group select,.form-group textarea { width:100%; padding:10px 14px; background:rgba(255,255,255,0.04); border:1px solid var(--glass-border); border-radius:var(--radius-sm); color:var(--text-primary); font-size:14px; font-family:inherit; transition:var(--transition); }
.form-group input:focus,.form-group select:focus,.form-group textarea:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(212,168,83,0.1); }
.form-group textarea { resize:vertical; min-height:80px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:600px){.form-row{grid-template-columns:1fr;}}

/* Tabs */
.tabs { display:flex; gap:4px; margin-bottom:20px; background:var(--glass-bg); border-radius:var(--radius-sm); padding:4px; border:1px solid var(--glass-border); overflow-x:auto; }
.tab { padding:8px 18px; border-radius:var(--radius-xs); font-size:13px; font-weight:600; color:var(--text-muted); cursor:pointer; transition:var(--transition); white-space:nowrap; border:none; background:none; }
.tab:hover { color:var(--text-primary); }
.tab.active { background:var(--gold); color:#000; }

/* Sections */
.section { display:none; }
.section.active { display:block; }
.med-tab { display:block; }

/* Profile */
.profile-header { display:flex; gap:24px; align-items:center; padding:24px; background:var(--glass-bg); backdrop-filter:blur(20px); border:1px solid var(--glass-border); border-radius:var(--radius); margin-bottom:24px; }
@media(max-width:600px){.profile-header{flex-direction:column;text-align:center;}}
.profile-avatar { width:100px; height:100px; border-radius:50%; background:linear-gradient(135deg,var(--gold),var(--gold-dark)); display:flex; align-items:center; justify-content:center; font-size:36px; color:#000; flex-shrink:0; }
.profile-info h2 { font-size:24px; font-weight:700; }
.profile-info .tags { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.profile-info .tags span { padding:4px 12px; border-radius:20px; font-size:11px; font-weight:600; background:rgba(255,255,255,0.04); border:1px solid var(--glass-border); }
.profile-meta { display:flex; gap:24px; margin-top:12px; flex-wrap:wrap; }
.profile-meta span { font-size:13px; color:var(--text-secondary); display:flex; align-items:center; gap:6px; }

/* NFC */
.nfc-sim { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px; text-align:center; }
.nfc-sim i { font-size:64px; color:var(--gold); margin-bottom:16px; }
.nfc-sim p { color:var(--text-secondary); margin-bottom:16px; }

/* AI */
.insight-card { background:linear-gradient(135deg,rgba(212,168,83,0.06),rgba(212,168,83,0.02)); border:1px solid rgba(212,168,83,0.15); border-radius:var(--radius-sm); padding:16px; margin-bottom:12px; }
.insight-card h4 { font-size:14px; font-weight:600; color:var(--gold); margin-bottom:6px; }
.insight-card p { font-size:13px; color:var(--text-secondary); }

/* Grids */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.grid-4 { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
@media(max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr;}}

/* RTL */
[dir="rtl"] .main { margin-left:0; margin-right:0; }
[dir="rtl"] .tabs { flex-direction:row-reverse; }
[dir="rtl"] .topbar-right { flex-direction:row-reverse; }
[dir="rtl"] .topbar-left { flex-direction:row-reverse; }
[dir="rtl"] th { text-align:right; }
[dir="rtl"] .modal-close { float:left; }
[dir="rtl"] .notif-dot { right:auto; left:6px; }
[dir="rtl"] .score-ring { transform:scaleX(-1); }
[dir="rtl"] .tags { flex-direction:row-reverse; }
[dir="rtl"] .sidebar-footer { justify-content:center; }

/* Mobile-first base */
html { -webkit-text-size-adjust:100%; }
img { max-width:100%; height:auto; }
.main { max-width:100%; overflow-x:hidden; padding:10px 12px }
.row { grid-template-columns:1fr; gap:12px }
.stat-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
.stat-card { padding:12px 8px; border-radius:var(--radius-xs) }
.stat-card .card-value { font-size:18px; font-weight:800 }
.stat-card .card-label { font-size:10px; text-transform:uppercase; letter-spacing:0.3px }
.topbar { margin-bottom:10px; flex-wrap:nowrap; gap:6px; padding:4px 0; min-height:44px }
.topbar-left { gap:8px; min-width:0; overflow:hidden }
.topbar-left .toggle-btn { font-size:18px; padding:8px; min-width:40px; min-height:40px; display:flex;align-items:center;justify-content:center; flex-shrink:0 }
.topbar h1 { font-size:15px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0 }
.topbar-right { gap:4px; flex-shrink:0 }
.topbar-right .lang-toggle { padding:6px 10px; font-size:11px; min-height:36px }
.topbar-right .btn-landing-header { padding:4px 10px !important; font-size:11px !important }
.topbar-right .notif-btn { width:36px; height:36px; font-size:14px }
.topbar-right .avatar { width:34px; height:34px; font-size:12px }
.card { padding:14px 16px; border-radius:var(--radius-sm) }
.card:hover { transform:none }
.card-value { font-size:24px }
.card-header { margin-bottom:10px; font-size:13px }
.table-wrap { margin:0 -12px; padding:0 12px; width:calc(100% + 24px); }
th, td { padding:8px 8px; font-size:11px; white-space:nowrap; }
.tabs { overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none; border-radius:var(--radius-xs); margin-bottom:12px }
.tabs::-webkit-scrollbar { display:none; }
.tab { padding:7px 12px; font-size:12px; flex-shrink:0; border-radius:4px; -webkit-tap-highlight-color:transparent }
.chart-container { height:150px; }
.chart-card { padding:14px; border-radius:var(--radius-sm) }
.chart-card h3 { font-size:12px; margin-bottom:10px }
.grid-2, .grid-3 { grid-template-columns:1fr; gap:12px }
textarea, input, select { font-size:16px !important; }
.modal { width:92%; max-width:460px; padding:20px 16px; border-radius:var(--radius-sm); max-height:90vh; margin:auto; }
.modal h2 { font-size:16px; margin-bottom:12px }
.modal-close { font-size:18px }
.page-content { padding-bottom:90px; }
.mb-24 { margin-bottom:14px }
.mb-16 { margin-bottom:10px }
html::-webkit-scrollbar { width:3px }
/* Extra small */
@media(max-width:400px){
  .stat-grid { grid-template-columns:1fr 1fr; gap:6px; }
  .stat-card { padding:10px 6px; }
  .topbar-left .toggle-btn { padding:4px; min-width:36px; min-height:36px }
  .btn { padding:8px 14px; font-size:12px; }
  .btn-gold,.btn-emerald,.btn-outline { padding:8px 14px; font-size:12px }
  .card { padding:12px; }
  .form-row { grid-template-columns:1fr; gap:10px; }
  .topbar h1 { font-size:14px }
  .topbar-right .lang-toggle { padding:4px 8px; font-size:10px; min-height:32px }
  .topbar-right .notif-btn { width:32px; height:32px; font-size:12px }
  .topbar-right .avatar { width:30px; height:30px; font-size:11px }
  .float-scan-btn { bottom:12px; padding:12px 24px; font-size:18px }
  .float-scan-btn i { font-size:20px }
}

/* Animations */
@keyframes fadeIn { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:translateY(0);} }
.section.active { animation:fadeIn 0.3s ease; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.6;} }
.pulse { animation:pulse 2s infinite; }

/* Modal */
.modal-overlay { position:fixed; top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);backdrop-filter:blur(4px);z-index:200;display:none;justify-content:center;align-items:center; }
.modal-overlay.open { display:flex; }
.modal { background:var(--bg-secondary); border:1px solid var(--glass-border); border-radius:var(--radius); padding:32px; max-width:600px; width:90%; max-height:85vh; overflow-y:auto; box-shadow:0 24px 64px rgba(0,0,0,0.5); }
.modal h2 { font-size:20px; margin-bottom:16px; }
.modal-close { float:right; background:none; border:none; color:var(--text-muted); font-size:20px; cursor:pointer; }
.modal-close:hover { color:var(--text-primary); }

/* Score Ring */
.score-ring { width:80px;height:80px;border-radius:50%;background:conic-gradient(var(--gold) var(--pct),rgba(255,255,255,0.06) 0);display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0; }
.score-ring-inner { width:60px;height:60px;border-radius:50%;background:var(--bg-secondary);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800; }

/* Utilities */
.mb-8 { margin-bottom:8px; } .mb-12 { margin-bottom:12px; } .mb-16 { margin-bottom:16px; } .mb-24 { margin-bottom:24px; }
.mt-8 { margin-top:8px; } .mt-12 { margin-top:12px; } .mt-16 { margin-top:16px; }
.gap-8 { gap:8px; } .gap-12 { gap:12px; } .gap-16 { gap:16px; }
.flex { display:flex; } .flex-wrap { flex-wrap:wrap; } .items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.text-gold { color:var(--gold); } .text-emerald { color:var(--emerald); } .text-red { color:var(--red); } .text-muted { color:var(--text-muted); } .text-blue { color:var(--blue); } .text-purple { color:var(--purple); } .text-orange { color:var(--orange); } .font-bold { font-weight:700; }
.w-full { width:100%; } .text-center { text-align:center; }
.grid-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; }
.photo-placeholder { aspect-ratio:4/3; background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:32px; cursor:pointer; transition:var(--transition); }
.photo-placeholder:hover { border-color:var(--gold); color:var(--gold); }
@media(max-width:600px){.nfc-result{padding:16px !important;}}

/* ===== NFC Radar Scanner ===== */
.scan-btn { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:20px 16px; font-size:16px; font-weight:700; border-radius:var(--radius-sm); border:2px solid var(--emerald); background:linear-gradient(135deg,rgba(46,204,113,0.15),rgba(46,204,113,0.05)); color:var(--emerald); cursor:pointer; transition:all 0.3s; }
.scan-btn:hover { background:linear-gradient(135deg,rgba(46,204,113,0.25),rgba(46,204,113,0.1)); box-shadow:0 0 30px rgba(46,204,113,0.2); transform:translateY(-2px); }
.scan-btn i { font-size:32px; }

.radar-scanner { position:relative; width:260px; height:260px; margin:20px auto; border-radius:50%; background:rgba(46,204,113,0.03); border:2px solid rgba(46,204,113,0.3); overflow:hidden; }
.radar-scanner .ring { position:absolute; border-radius:50%; border:1px solid rgba(46,204,113,0.15); top:50%;left:50%;transform:translate(-50%,-50%); animation:pulse-ring 2s ease-out infinite; }
.radar-scanner .ring:nth-child(1) { width:80%;height:80%; animation-delay:0s; }
.radar-scanner .ring:nth-child(2) { width:55%;height:55%; animation-delay:0.5s; }
.radar-scanner .ring:nth-child(3) { width:30%;height:30%; animation-delay:1s; }
.radar-scanner .beam { position:absolute; top:50%;left:50%; width:50%; height:2px; background:linear-gradient(90deg,rgba(46,204,113,0.8),transparent); transform-origin:left center; animation:radar-sweep 2.5s linear infinite; }
.radar-scanner .beam::before { content:''; position:absolute; right:-6px; top:-4px; width:10px;height:10px; border-radius:50%; background:var(--emerald); box-shadow:0 0 12px var(--emerald); }
.radar-scanner .center-dot { position:absolute; top:50%;left:50%; width:12px;height:12px; border-radius:50%; background:var(--emerald); transform:translate(-50%,-50%); box-shadow:0 0 20px var(--emerald); z-index:2; }
.radar-scanner .blip { position:absolute; width:8px;height:8px; border-radius:50%; background:var(--emerald); box-shadow:0 0 10px var(--emerald); animation:blip-fade 1.5s ease-out forwards; pointer-events:none; }

@keyframes radar-sweep { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@keyframes pulse-ring { 0% { opacity:0.5; transform:translate(-50%,-50%) scale(0.8); } 50% { opacity:0.2; transform:translate(-50%,-50%) scale(1.2); } 100% { opacity:0; transform:translate(-50%,-50%) scale(1.5); } }
@keyframes blip-fade { 0% { opacity:1; transform:scale(1); } 100% { opacity:0; transform:scale(2); } }

/* Floating Scan NFC Button */
.float-scan-btn {
  position:fixed; bottom:40px; left:50%; transform:translateX(-50%);
  z-index:200;
  display:flex; align-items:center; gap:18px;
  padding:24px 48px;
  border:none;
  border-radius:60px;
  background:linear-gradient(135deg,#10b981,#059669);
  color:#fff;
  font-size:50px; font-weight:700; font-family:inherit;
  cursor:pointer;
  box-shadow:0 10px 48px rgba(16,185,129,0.5);
  transition:all 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.float-scan-btn:hover {
  transform:translateX(-50%) translateY(-4px);
  box-shadow:0 20px 60px rgba(16,185,129,0.65);
}
.float-scan-btn:active { transform:translateX(-50%) scale(0.95); }
.float-scan-btn i { font-size:52px; }
.float-scan-label { display:inline; }
@media (max-width:600px) {
  .float-scan-btn { bottom:16px; padding:12px 24px; font-size:18px; gap:10px; border-radius:40px; }
  .float-scan-btn i { font-size:20px; }
}

.nfc-password-input { max-width:320px; margin:16px auto; }
.nfc-password-input input { width:100%; padding:12px 16px; border-radius:var(--radius-sm); border:1px solid var(--glass-border); background:var(--bg-primary); color:var(--text-primary); font-size:16px; text-align:center; letter-spacing:4px; outline:none; transition:border-color 0.2s; }
.nfc-password-input input:focus { border-color:var(--emerald); }
.nfc-password-input input::placeholder { letter-spacing:0; }

.radar-flash { animation:flash-green 0.4s ease; }
@keyframes flash-green { 0% { box-shadow:0 0 0 0 rgba(46,204,113,0.6); } 100% { box-shadow:0 0 0 40px rgba(46,204,113,0); } }

.changelog-preview { font-size:12px; color:var(--text-secondary); line-height:1.6; }
.changelog-preview br + br { display:none; }