:root{--navy:#10213c;--blue:#3762e2;--blue2:#4c7df0;--ink:#17243a;--muted:#78859a;--line:#e7ecf4;--bg:#f5f7fb;--white:#fff;--green:#159b70;--red:#d84b55;--shadow:0 10px 35px rgba(16,33,60,.06)}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'Tajawal',Arial,sans-serif;font-size:15px}a{color:inherit;text-decoration:none}button,input,select{font:inherit}.app-shell{min-height:100vh;display:flex}.sidebar{width:258px;background:var(--navy);color:#fff;padding:25px 17px;display:flex;flex-direction:column;position:fixed;right:0;top:0;bottom:0;z-index:5}.brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:800;padding:0 10px 28px}.brand b,.auth-brand b{color:#6fa1ff}.brand-mark{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#5b8df5,#3762e2);display:inline-flex;align-items:center;justify-content:center;color:white;font-size:19px;box-shadow:0 7px 18px #3762e255}.side-caption{font-size:10px;letter-spacing:1.6px;color:#8295b5;font-weight:800;padding:17px 12px 9px}.sidebar nav{display:flex;flex-direction:column;gap:5px}.sidebar nav a{padding:12px 13px;border-radius:10px;color:#c4cee0;display:flex;align-items:center;gap:12px;font-weight:600;transition:.2s}.sidebar nav a i{width:18px;text-align:center}.sidebar nav a:hover,.sidebar nav a:focus{background:#ffffff14;color:white}.sidebar-bottom{margin-top:auto;border-top:1px solid #ffffff1c;padding:18px 4px 0;display:flex;align-items:center;gap:10px}.avatar{width:36px;height:36px;border-radius:50%;background:#3762e2;display:grid;place-items:center;font-weight:800}.user-mini{display:flex;flex-direction:column;min-width:0;flex:1}.user-mini b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-mini small{color:#9caecb;font-size:11px}.logout{color:#aebbd1;padding:8px}.main{width:calc(100% - 258px);margin-right:258px;padding:34px 38px 55px;max-width:1700px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:27px}.topbar h1{font-size:30px;margin:4px 0 1px;font-weight:800}.topbar p,.panel-head p{margin:0;color:var(--muted)}.eyebrow{font-size:10px;letter-spacing:1.5px;color:var(--blue);font-weight:800}.btn{border:0;border-radius:9px;padding:11px 17px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;cursor:pointer;transition:.2s;white-space:nowrap}.btn.primary{background:var(--blue);color:white;box-shadow:0 5px 14px #3762e22b}.btn.primary:hover{background:#254fca;transform:translateY(-1px)}.btn.light{background:#edf1f8;color:#33435d}.btn.danger{background:#fff0f1;color:var(--red)}.btn.tiny{padding:7px 10px;font-size:12px}.btn.full{width:100%}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:23px}.stats-grid.two{grid-template-columns:repeat(2,minmax(0,1fr));margin:0}.stat-card{background:white;border:1px solid var(--line);border-radius:13px;padding:19px 20px;box-shadow:var(--shadow)}.stat-top{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:13px}.stat-top i{width:34px;height:34px;border-radius:10px;background:#edf2ff;color:var(--blue);display:grid;place-items:center}.stat-card strong{display:block;font-size:28px;margin:11px 0 0;font-weight:800;direction:ltr;text-align:right}.stat-card small{color:#98a3b4;font-size:11px}.panel{background:white;border:1px solid var(--line);border-radius:14px;padding:22px;margin-bottom:20px;box-shadow:var(--shadow)}.panel h2{font-size:18px;margin:0 0 5px;font-weight:800}.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.text-link{color:var(--blue);font-weight:700;font-size:13px}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:650px}th{text-align:right;color:#8b97a9;font-size:11px;font-weight:700;background:#fafbfd;padding:12px 13px}td{padding:14px 13px;border-top:1px solid #f0f2f6;font-size:13px}td small{display:block;color:#9aa5b4;font-size:11px;margin-top:3px}.qr-name{display:flex;align-items:center;gap:10px}.mini-qr{width:36px;height:36px;border:1px solid var(--line);border-radius:9px;display:grid;place-items:center;color:var(--blue);font-size:18px}.url-cell{max-width:270px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:ltr;text-align:right;color:#77849a}.status{font-size:11px;padding:5px 9px;border-radius:20px;font-weight:700}.status.green{background:#e7f7f1;color:#14845f}.status.gray{background:#eef1f5;color:#7c8797}.icon-btn{color:#8290a4;padding:8px}.empty{text-align:center;padding:42px 15px}.empty-icon{width:64px;height:64px;border-radius:18px;background:#eef3ff;color:var(--blue);display:grid;place-items:center;font-size:25px;margin:0 auto 15px}.empty h3{margin:0 0 7px;font-size:19px}.empty p{color:var(--muted);margin:0 auto 18px;max-width:430px}.plan-strip{background:#eaf0ff;border:1px solid #dce6ff;border-radius:12px;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;color:#2446a2}.plan-strip div{display:flex;flex-direction:column;gap:3px}.plan-strip span{font-size:12px;color:#657ba9}.plan-strip>a{font-weight:800;font-size:13px}.form-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.8fr);gap:20px;align-items:start}.form-panel{display:flex;flex-direction:column;gap:15px}.form-panel h2{margin-bottom:4px}.form-panel label,.auth-card label{display:flex;flex-direction:column;gap:7px;font-weight:700;font-size:13px}.form-panel input,.form-panel select,.auth-card input,.new-plan input{width:100%;border:1px solid #dfe5ef;border-radius:9px;padding:12px 13px;background:white;outline:0;color:var(--ink)}input:focus,select:focus{border-color:#7b9af2;box-shadow:0 0 0 3px #3762e217}.hint{background:#f1f5ff;border-radius:9px;padding:12px;color:#59709d;font-size:12px;line-height:1.7}.preview-card{background:linear-gradient(155deg,#112644,#1d3c68);border-radius:15px;padding:27px;color:white;text-align:center}.preview-qr{width:120px;height:120px;background:white;border-radius:14px;color:#17243a;display:grid;place-items:center;font-size:74px;margin:0 auto 17px}.preview-card h3{margin:0 0 5px}.preview-card p{color:#b8c9e3;font-size:13px}.preview-points{display:flex;flex-direction:column;gap:8px;text-align:right;margin-top:20px;color:#d5e3f7;font-size:12px}.preview-points i{color:#76d4b0;margin-left:7px}.detail-grid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:20px;align-items:start}.qr-preview-panel{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}.qr-image{width:240px;height:240px;padding:12px;background:white;border:1px solid var(--line);border-radius:14px}.qr-image img{width:100%;height:100%;object-fit:contain}.muted{color:var(--muted);font-size:12px}.action-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:6px}.detail-main{display:flex;flex-direction:column;gap:17px}.detail-main .panel{margin:0}.inline-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.inline-actions>div{flex:1}.inline-actions p{margin:4px 0 0;color:var(--muted);font-size:12px}.bar-chart{height:220px;display:flex;align-items:end;gap:12px;padding:15px 5px 0;overflow-x:auto}.bar-col{height:100%;min-width:36px;flex:1;display:flex;flex-direction:column;justify-content:end;align-items:center;gap:7px}.bar{width:100%;max-width:35px;background:linear-gradient(180deg,#6b93f5,#3762e2);border-radius:6px 6px 2px 2px;min-height:3px}.bar-value{font-size:10px;color:#77849a}.bar-col small{font-size:10px;color:#8894a6}.analytics-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.data-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #f0f2f6;font-size:13px}.data-row:last-child{border-bottom:0}.alert{padding:12px 14px;border-radius:9px;margin-bottom:17px;font-size:13px}.alert.error{background:#fff0f1;color:#b73b45}.alert.success{background:#e9f8f2;color:#167a59}.auth-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:35px 18px;background:radial-gradient(circle at 15% 10%,#e5edff,transparent 35%),linear-gradient(145deg,#f8fafc,#edf2f8)}.auth-brand{text-align:center;margin-bottom:20px}.brand-mark.big{width:55px;height:55px;font-size:25px;margin:auto}.auth-brand h1{font-size:25px;margin:12px 0 0}.auth-brand p{font-size:10px;letter-spacing:2px;color:#71809a;font-weight:800;margin:3px}.auth-card{background:white;border:1px solid var(--line);border-radius:16px;padding:28px;width:min(100%,430px);box-shadow:0 20px 60px #10213c12;display:flex;flex-direction:column;gap:15px}.auth-card h2{font-size:22px;margin:0}.auth-card>p{margin:-9px 0 3px;color:var(--muted);font-size:13px}.auth-switch{text-align:center;color:var(--muted);font-size:12px}.auth-switch a{color:var(--blue);font-weight:800}.auth-foot{margin-top:22px;color:#9ba7b8;font-size:11px}.block{display:block}.table-input{border:1px solid #e1e6ef;border-radius:7px;padding:8px;width:130px;font:inherit}.small-input{width:90px}.new-plan{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:17px}.new-plan input{width:140px;padding:9px}.new-plan label{font-size:12px;display:flex;gap:5px;align-items:center}
@media(max-width:1100px){.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.main{padding:28px 24px}.detail-grid{grid-template-columns:270px 1fr}}@media(max-width:760px){.sidebar{width:68px;padding:18px 8px}.brand{padding:0 7px 24px;font-size:0;justify-content:center}.brand-mark{flex:none}.side-caption,.sidebar nav a:not(:first-child){font-size:0}.sidebar nav a{justify-content:center;padding:13px 5px}.sidebar nav a i{font-size:17px}.sidebar nav a:first-child{font-size:0}.sidebar-bottom{justify-content:center}.user-mini,.logout{display:none}.main{width:calc(100% - 68px);margin-right:68px;padding:22px 14px 40px}.topbar{align-items:flex-start;flex-direction:column}.topbar h1{font-size:25px}.stats-grid{gap:9px}.stat-card{padding:14px}.stat-card strong{font-size:22px}.stat-top{font-size:11px}.panel{padding:16px}.form-layout,.detail-grid,.analytics-grid{grid-template-columns:1fr}.qr-preview-panel{order:0}.plan-strip{gap:12px;align-items:flex-start;flex-direction:column}.detail-main{order:1}.topbar .btn{align-self:stretch}.auth-card{padding:22px}.bar-chart{gap:7px}}