* { margin:0; padding:0; box-sizing:border-box; }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #2B2D4E 0%, #1DB9C3 100%);
            min-height: 100vh;
            padding: 20px;
        }

        /* ─── Login ─── */
        .login-container { display:flex; justify-content:center; align-items:center; min-height:100vh; }
        .login-box {
            background:#fff; padding:50px; border-radius:20px;
            box-shadow:0 20px 60px rgba(0,0,0,.3); max-width:400px; width:100%; text-align:center;
        }
        .login-box h1 { color:#1DB9C3; margin-bottom:10px; font-size:32px; }
        .login-box p  { color:#666; margin-bottom:30px; }
        .login-box .lock-icon { font-size:64px; margin-bottom:20px; }
        
        /* ─── Logo ─── */
        .logo-container { 
            width: 100%; 
            max-width: 200px; 
            margin: 0 auto 20px; 
            padding: 0 10px; 
        }
        .logo-container img { 
            width: 100%; 
            height: auto; 
            display: block; 
            filter: drop-shadow(0 2px 8px rgba(0,0,0,0.1)); 
        }
        
        @media (max-width: 480px) {
            .logo-container { 
                max-width: 150px; 
                margin-bottom: 15px; 
            }
        }
        
        @media (max-width: 360px) {
            .logo-container { 
                max-width: 130px; 
                margin-bottom: 12px; 
            }
        }
        .login-form input {
            width:100%; padding:15px; border:2px solid #ddd; border-radius:10px;
            font-size:16px; margin-bottom:20px; transition:border-color .3s;
        }
        .login-form input:focus { outline:none; border-color:#1DB9C3; }
        .login-form button {
            width:100%; padding:15px;
            background:linear-gradient(135deg,#2B2D4E 0%,#1DB9C3 100%);
            color:#fff; border:none; border-radius:10px; font-size:18px;
            font-weight:bold; cursor:pointer; transition:all .3s;
        }
        .login-form button:hover { transform:translateY(-2px); box-shadow:0 10px 25px rgba(0,0,0,.3); }
        .error-message { background:#f8d7da; color:#721c24; padding:12px; border-radius:8px; margin-bottom:15px; display:none; }
        .error-message.show { display:block; animation:shake .5s; }

        @keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-10px)} 75%{transform:translateX(10px)} }

        /* ─── Dashboard Layout ─── */
        #adminDashboard { display:none; }
        .container { max-width:1400px; margin:0 auto; }

        .header {
            background:#fff; padding:25px; border-radius:15px;
            box-shadow:0 10px 30px rgba(0,0,0,.3); margin-bottom:30px;
            text-align:center; position:relative;
        }
        .header h1 { color:#1DB9C3; margin-bottom:10px; font-size:32px; padding-right:100px; }
        .header p  { color:#666; font-size:16px; }

        .logout-btn {
            position:absolute; top:20px; right:20px; padding:10px 20px;
            background:#f5576c; color:#fff; border:none; border-radius:8px;
            cursor:pointer; font-weight:bold; font-size:14px; transition:all .3s; white-space:nowrap;
        }
        .logout-btn:hover { background:#d9455a; transform:translateY(-2px); }

        /* ─── Tabs ─── */
        .tabs { display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap; }
        .tab-btn {
            flex:1; min-width:120px; padding:15px 18px; background:#fff; border:none;
            border-radius:10px; cursor:pointer; font-size:15px; font-weight:bold;
            color:#666; transition:all .3s; box-shadow:0 5px 15px rgba(0,0,0,.2); text-align:center;
        }
        .tab-btn.active {
            background:linear-gradient(135deg,#2B2D4E 0%,#1DB9C3 100%);
            color:#fff; transform:translateY(-2px); box-shadow:0 7px 20px rgba(0,0,0,.3);
        }

        /* ─── Tab Content ─── */
        .tab-content { display:none; background:#fff; padding:30px; border-radius:15px; box-shadow:0 10px 30px rgba(0,0,0,.3); animation:fadeIn .3s; }
        .tab-content.active { display:block; }
        @keyframes fadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

        /* ─── Stats ─── */
        .stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; margin-bottom:30px; }
        .stat-card {
            background:linear-gradient(135deg,#2B2D4E 0%,#1DB9C3 100%);
            color:#fff; padding:25px; border-radius:15px;
            box-shadow:0 5px 15px rgba(0,0,0,.2); transition:transform .3s;
        }
        .stat-card:hover { transform:translateY(-5px); }
        .stat-card h3   { font-size:14px; opacity:.9; margin-bottom:10px; text-transform:uppercase; }
        .stat-card .number { font-size:42px; font-weight:bold; margin-bottom:5px; }
        .stat-card .label  { font-size:13px; opacity:.85; font-weight:bold; }

        /* ─── Tag Form ─── */
        .tag-form { background:#f8f9fa; padding:25px; border-radius:10px; margin-bottom:30px; }
        .form-group { margin-bottom:20px; }
        .form-group label { display:block; margin-bottom:8px; font-weight:bold; color:#333; }
        .form-group input, .form-group textarea { width:100%; padding:12px; border:2px solid #ddd; border-radius:8px; font-size:16px; }
        .form-group textarea { resize:vertical; min-height:80px; }

        /* ─── Buttons ─── */
        .btn-primary {
            padding:12px 30px; background:linear-gradient(135deg,#2B2D4E 0%,#1DB9C3 100%);
            color:#fff; border:none; border-radius:8px; font-size:16px;
            font-weight:bold; cursor:pointer; transition:all .3s;
        }
        .btn-primary:hover { transform:translateY(-2px); box-shadow:0 5px 15px rgba(0,0,0,.3); }

        /* ─── Tag Cards ─── */
        .tags-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; margin-top:30px; }
        .tag-card {
            background:#fff; border:2px solid #e0e0e0; padding:20px;
            border-radius:12px; box-shadow:0 3px 10px rgba(0,0,0,.1); transition:all .3s;
        }
        .tag-card:hover { transform:translateY(-5px); box-shadow:0 5px 20px rgba(0,0,0,.15); border-color:#1DB9C3; }
        .tag-card h3 { color:#1DB9C3; margin-bottom:15px; font-size:22px; }
        .tag-card p  { margin-bottom:6px; font-size:15px; color:#444; }
        .qr-code { text-align:center; margin:20px 0; padding:15px; background:#f8f9fa; border-radius:8px; }
        .qr-code canvas { max-width: 100%; height: auto !important; }

        .btn-download {
            width:100%; padding:10px;
            background:linear-gradient(135deg,#1DB9C3 0%,#4FFFE9 100%);
            color:#fff; border:none; border-radius:8px; cursor:pointer;
            font-weight:bold; margin-top:10px; font-size:15px; transition:all .3s;
        }
        .btn-download:hover { transform:translateY(-2px); box-shadow:0 4px 14px rgba(29,185,195,.45); }

        .btn-delete {
            width:100%; padding:10px; background:#f5576c; color:#fff; border:none;
            border-radius:8px; cursor:pointer; font-weight:bold; margin-top:10px;
            font-size:15px; transition:background .3s;
        }
        .btn-delete:hover { background:#d9455a; }

        /* ─── Filter ─── */
        .filter-section {
            background:#f8f9fa; padding:20px; border-radius:10px;
            margin-bottom:20px; display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;
        }
        .filter-section > div { flex:1 1 140px; min-width:140px; }
        .filter-section input, .filter-section select {
            width:100%; padding:10px; border:2px solid #ddd; border-radius:8px; font-size:15px; background:#fff;
        }
        .filter-section label { display:block; margin-bottom:5px; font-weight:bold; font-size:14px; color:#444; }
        .filter-buttons { display:flex; gap:10px; flex-wrap:wrap; }

        /* ─── Table ─── */
        .table-wrap { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,.08); margin-top:20px; }
        table { width:100%; min-width:550px; border-collapse:collapse; }
        th, td { padding:14px 16px; text-align:left; border-bottom:1px solid #eee; white-space:nowrap; font-size:15px; }
        th { background:linear-gradient(135deg,#2B2D4E 0%,#1DB9C3 100%); color:#fff; font-weight:bold; position:sticky; top:0; z-index:1; }
        th:first-child { border-radius:10px 0 0 0; }
        th:last-child  { border-radius:0 10px 0 0; }
        tr:hover { background:#f5f7ff; }
        tbody tr:last-child td { border-bottom:none; }

        .realtime-indicator { display:inline-block; width:12px; height:12px; background:#4FFFE9; border-radius:50%; margin-right:8px; animation:blink 2s infinite; }
        @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

        .export-row { text-align:right; margin-bottom:10px; margin-top:10px; }

        /* ─── Scan History action row ─── */
        .scans-action-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 10px;
        }
        .btn-danger {
            padding: 10px 22px;
            background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
            color: #fff; border: none; border-radius: 8px;
            font-size: 15px; font-weight: bold; cursor: pointer; transition: all .3s;
        }
        .btn-danger:hover { transform: translateY(-2px); box-shadow: 0 5px 14px rgba(235,51,73,.4); }

        /* ─── QR Modal ─── */
        .qr-modal-overlay {
            display:none; position:fixed; inset:0;
            background:rgba(0,0,0,.6); z-index:9999;
            justify-content:center; align-items:center; padding:16px;
            -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
        }
        .qr-modal-overlay.open { display:flex; }

        .qr-modal {
            background:#fff; border-radius:16px; padding:20px 18px 18px;
            width:100%; max-width:300px;
            box-shadow:0 20px 50px rgba(0,0,0,.35); text-align:center;
            position:relative;
            animation:modalPop .22s cubic-bezier(.175,.885,.32,1.275);
        }
        @keyframes modalPop { from{transform:scale(.88);opacity:0} to{transform:scale(1);opacity:1} }

        .qr-modal-close {
            position:absolute; top:10px; right:13px;
            background:none; border:none; font-size:20px;
            cursor:pointer; color:#aaa; line-height:1; transition:color .2s;
        }
        .qr-modal-close:hover { color:#1DB9C3; }

        .qr-modal h3         { color:#1DB9C3; font-size:19px; margin-bottom:2px; }
        .qr-modal .modal-loc { color:#999; font-size:13px; margin-bottom:12px; }
        .qr-modal canvas     { max-width:100%; border-radius:8px; border:1px solid #eee; }

        .modal-btn-row { margin-top:14px; display:flex; flex-direction:column; gap:8px; }

        .modal-btn {
            width:100%; padding:11px 16px; border:none; border-radius:9px;
            font-size:15px; font-weight:700; color:#fff; cursor:pointer;
            transition:all .2s; letter-spacing:.2px;
        }
        .modal-btn:active { transform:scale(.97); }

        /* 💾 Save Image — cyan gradient */
        .modal-btn.save-img {
            background:linear-gradient(135deg, #1DB9C3 0%, #4FFFE9 100%);
            box-shadow: 0 4px 14px rgba(29,185,195,.45);
        }
        .modal-btn.save-img:hover {
            background:linear-gradient(135deg, #4FFFE9 0%, #1DB9C3 100%);
            box-shadow: 0 6px 18px rgba(29,185,195,.55);
            transform:translateY(-1px);
        }

        /* 🖨️ Print — deep blue */
        .modal-btn.print-btn {
            background:linear-gradient(135deg, #2B2D4E 0%, #1DB9C3 100%);
            box-shadow: 0 4px 14px rgba(43,45,78,.5);
        }
        .modal-btn.print-btn:hover {
            background:linear-gradient(135deg, #1DB9C3 0%, #2B2D4E 100%);
            box-shadow: 0 6px 18px rgba(43,45,78,.6);
            transform:translateY(-1px);
        }

        /* 📄 Save as PDF — gray accent */
        .modal-btn.pdf-btn {
            background:linear-gradient(135deg, #A9ADB2 0%, #2B2D4E 100%);
            box-shadow: 0 4px 14px rgba(169,173,178,.5);
        }
        .modal-btn.pdf-btn:hover {
            background:linear-gradient(135deg, #2B2D4E 0%, #A9ADB2 100%);
            box-shadow: 0 6px 18px rgba(169,173,178,.6);
            transform:translateY(-1px);
        }

        /* Cancel — soft neutral */
        .modal-btn.cancel {
            background:#f2f2f2; color:#666;
            box-shadow: none;
        }
        .modal-btn.cancel:hover { background:#e6e6e6; }

        /* ─── Confirm Modal (delete history) ─── */
        .confirm-overlay {
            display:none; position:fixed; inset:0;
            background:rgba(0,0,0,.55); z-index:10000;
            justify-content:center; align-items:center; padding:20px;
        }
        .confirm-overlay.open { display:flex; }
        .confirm-box {
            background:#fff; border-radius:18px; padding:32px 28px 24px;
            max-width:360px; width:100%; text-align:center;
            box-shadow:0 20px 50px rgba(0,0,0,.3);
            animation:modalPop .2s cubic-bezier(.175,.885,.32,1.275);
        }
        .confirm-box .confirm-icon { font-size:48px; margin-bottom:12px; }
        .confirm-box h3 { font-size:20px; color:#333; margin-bottom:8px; }
        .confirm-box p  { color:#777; font-size:15px; margin-bottom:22px; line-height:1.5; }
        .confirm-btns { display:flex; gap:12px; }
        .confirm-btns button {
            flex:1; padding:12px; border:none; border-radius:10px;
            font-size:16px; font-weight:bold; cursor:pointer; transition:all .25s;
        }
        .confirm-btns .yes { background:linear-gradient(135deg,#eb3349 0%,#f45c43 100%); color:#fff; }
        .confirm-btns .yes:hover { transform:translateY(-2px); box-shadow:0 5px 14px rgba(235,51,73,.4); }
        .confirm-btns .no  { background:#eee; color:#555; }
        .confirm-btns .no:hover  { background:#ddd; }

        /* ─── Toast ─── */
        .toast {
            position:fixed; bottom:30px; left:50%; transform:translateX(-50%) translateY(120px);
            background:#333; color:#fff; padding:14px 28px; border-radius:10px;
            font-size:15px; font-weight:bold; z-index:11000;
            transition:transform .35s cubic-bezier(.175,.885,.32,1.275);
            white-space:nowrap; box-shadow:0 6px 20px rgba(0,0,0,.25);
        }
        .toast.show { transform:translateX(-50%) translateY(0); }
        .toast.success { background:linear-gradient(135deg,#1DB9C3 0%,#4FFFE9 100%); }
        .toast.error   { background:linear-gradient(135deg,#eb3349 0%,#f45c43 100%); }

        /* ═══ RESPONSIVE ═══ */
        @media (max-width:768px) {
            body { padding:12px; }
            .login-box { padding:35px 25px; }
            .login-box h1 { font-size:26px; }
            .header { padding:60px 20px 22px; text-align:center; }
            .header h1 { font-size:24px; padding-right:0; }
            .logout-btn { top:14px; right:14px; padding:8px 14px; font-size:13px; }
            .tabs { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
            .tab-btn { min-width:unset; padding:12px 8px; font-size:14px; }
            .tab-content { padding:20px 16px; }
            .stats-grid { grid-template-columns:1fr 1fr; gap:12px; }
            .stat-card { padding:18px 14px; }
            .stat-card .number { font-size:32px; }
            .tags-grid { grid-template-columns:1fr; }
            .filter-section { flex-direction:column; align-items:stretch; }
            .filter-section > div { flex:none; width:100%; }
            .filter-buttons { width:100%; }
            .filter-buttons .btn-primary { flex:1; text-align:center; padding:11px 10px; }
            .tag-form { padding:18px; }
            table { min-width:480px; }
            .scans-action-row { flex-direction:column; align-items:stretch; }
            .scans-action-row .btn-primary,
            .scans-action-row .btn-danger { width:100%; text-align:center; }
        }
        @media (max-width:480px) {
            body { padding:8px; }
            .login-box { padding:30px 18px; }
            .login-box .lock-icon { font-size:48px; }
            .login-box h1 { font-size:22px; }
            .header { padding:52px 16px 18px; border-radius:12px; margin-bottom:14px; }
            .header h1 { font-size:20px; }
            .header p { font-size:13px; }
            .logout-btn { top:12px; right:12px; padding:7px 11px; font-size:12px; }
            .tabs { grid-template-columns:1fr 1fr; gap:6px; }
            .tab-btn { padding:10px 4px; font-size:13px; border-radius:8px; }
            .tab-content { padding:16px 12px; border-radius:12px; }
            .tab-content h2 { font-size:18px; margin-bottom:14px !important; }
            .stats-grid { grid-template-columns:1fr 1fr; gap:8px; }
            .stat-card { padding:14px 10px; border-radius:10px; }
            .stat-card h3 { font-size:11px; margin-bottom:6px; }
            .stat-card .number { font-size:26px; }
            .stat-card .label { font-size:11px; }
            .tag-form { padding:14px; border-radius:8px; }
            .btn-primary { font-size:15px; }
            .form-group input, .form-group textarea { font-size:15px; padding:10px; }
            .tag-card { padding:16px; }
            .tag-card h3 { font-size:18px; }
            table { min-width:420px; }
            th, td { padding:10px 12px; font-size:13px; }
            .filter-section { padding:14px; gap:8px; }
            .export-row { text-align:center; }
            .export-row .btn-primary { width:100%; }
            .qr-modal { max-width:92vw; padding:16px 14px 14px; border-radius:14px; }
            .qr-modal h3 { font-size:17px; }
            .modal-btn { padding:10px 12px; font-size:14px; border-radius:8px; }
            .modal-btn-row { gap:7px; margin-top:12px; }
            .confirm-box { padding:26px 20px 20px; }
        }
        @media (max-width:360px) {
            .stats-grid { grid-template-columns:1fr; }
            .tabs { grid-template-columns:1fr 1fr; }
            .tab-btn { font-size:12px; padding:9px 2px; }
        }