@import "tailwindcss";

:root { --navy:#071c34; --blue:#0b5cff; --cyan:#00b7ff; --line:#dce5ef; --muted:#65758b; --surface:#fff; --bg:#edf3f8; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:var(--bg); color:var(--navy); font-family:Arial,Helvetica,sans-serif; }
button,input { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.45; }
.login-screen { min-height:100dvh; position:relative; overflow:hidden; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 50% 20%,#163d65 0,#0a2440 34%,#031425 100%); }
.login-screen:before { content:""; position:absolute; inset:0; opacity:.12; background-image:linear-gradient(rgba(255,255,255,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.15) 1px,transparent 1px); background-size:32px 32px; }
.ambient { position:absolute; width:280px; height:280px; border-radius:50%; filter:blur(80px); opacity:.25; }.ambient-one{background:#007cff;top:-100px;right:-80px}.ambient-two{background:#00c6ff;bottom:-140px;left:-100px}
.login-card { width:min(100%,420px); position:relative; z-index:1; padding:36px 28px 28px; border:1px solid rgba(255,255,255,.15); border-radius:28px; background:rgba(7,29,51,.86); box-shadow:0 26px 70px rgba(0,0,0,.4); backdrop-filter:blur(18px); color:#fff; }
.login-logo { display:block; width:210px; height:88px; object-fit:contain; margin:0 auto 22px; }
.login-heading { text-align:center; margin-bottom:27px; }.login-heading span{font-size:10px;letter-spacing:.26em;color:#4cc8ff;font-weight:800}.login-heading h1{font-size:25px;margin:8px 0}.login-heading p{font-size:13px;color:#9eb0c4;margin:0}
.login-card label { display:grid; gap:8px; font-size:11px; letter-spacing:.12em; font-weight:800; margin-top:16px; color:#c7d4e0; }
.login-card input { height:54px; border-radius:12px; border:1px solid #3a526b; background:#071a2d; color:#fff; padding:0 16px; outline:none; }.login-card input:focus{border-color:#22aaff;box-shadow:0 0 0 3px rgba(34,170,255,.16)}
.login-button { width:100%; margin-top:24px; }.login-card small{display:block;text-align:center;margin-top:22px;color:#7790aa;font-size:10px;letter-spacing:.08em}
.login-error{margin-top:14px;padding:11px 12px;border:1px solid #ff6879;border-radius:10px;background:rgba(185,25,46,.16);color:#ffbac2;text-align:center;font-size:12px;font-weight:800}.loading-mark{position:relative;z-index:1;color:#fff;font-size:17px;font-weight:900;letter-spacing:.2em;animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{50%{opacity:.35}}
.app-shell { min-height:100dvh; background:linear-gradient(180deg,#f8fbfe 0,#eaf1f7 100%); padding-bottom:30px; }
.topbar { height:76px; padding:0 max(18px,calc((100% - 760px)/2)); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:13px; background:#071c34; color:#fff; box-shadow:0 5px 18px rgba(3,17,31,.2); position:sticky; top:0; z-index:10; }
.topbar img { width:104px; height:52px; object-fit:contain; }.topbar>div{border-left:1px solid #2b4156;padding-left:12px}.topbar span{display:block;color:#45c5ff;font-size:8px;letter-spacing:.17em;font-weight:800}.topbar strong{font-size:14px}.icon-button{width:40px;height:40px;border:1px solid #2c4964;border-radius:10px;background:#0e2b47;color:#fff;font-size:20px}
.content { width:min(100%,760px); margin:auto; padding:18px 14px; }
.operator { min-height:55px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; margin-bottom:13px; padding:10px 13px; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:0 4px 14px rgba(28,62,92,.05); }.live-dot{width:9px;height:9px;border-radius:50%;background:#17c873;box-shadow:0 0 0 5px #d9f7e8}.operator small{display:block;font-size:8px;letter-spacing:.15em;color:var(--muted);font-weight:800}.operator b{font-size:12px}.operator time{font-size:11px;color:var(--muted)}
.scan-card,.data-card { background:#fff; border:1px solid var(--line); border-radius:18px; padding:17px; box-shadow:0 8px 24px rgba(23,57,87,.07); margin-bottom:13px; }
.section-title { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }.section-title>div{display:flex;align-items:center;gap:10px}.section-title span{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#e8f3ff;color:#0874df;font-size:11px;font-weight:900}.section-title h2{font-size:15px;margin:0}.section-title em{font-style:normal;font-size:8px;font-weight:900;letter-spacing:.12em;color:#078c51;background:#dff8ec;padding:7px 9px;border-radius:20px}.camera-button{border:1px solid #b9d9f5;background:#eef8ff;color:#0673c7;border-radius:9px;padding:8px 11px;font-size:9px;font-weight:900;letter-spacing:.1em}
.code-field>span { display:block; color:var(--muted); font-size:9px; font-weight:900; letter-spacing:.13em; margin:0 0 7px 2px; }.code-field>div{display:grid;grid-template-columns:1fr auto;border:2px solid #b9cfe2;border-radius:12px;overflow:hidden;transition:.2s}.code-field>div:focus-within{border-color:#0877e5;box-shadow:0 0 0 4px #e1f0ff}.code-field input{min-width:0;height:56px;padding:0 14px;border:0;outline:none;text-transform:uppercase;font-weight:800;color:#09213b}.code-field button{border:0;background:#096cce;color:#fff;margin:5px;border-radius:8px;padding:0 17px;font-size:10px;font-weight:900;letter-spacing:.08em}
.camera-frame{position:relative;aspect-ratio:4/3;background:#020b13;border-radius:14px;overflow:hidden;margin-bottom:15px}.camera-frame video{width:100%;height:100%;object-fit:cover}.camera-frame i{position:absolute;inset:18%;border:2px solid #35c7ff;border-radius:12px;box-shadow:0 0 25px #00aef5 inset}.camera-frame p{position:absolute;bottom:12px;left:0;right:0;text-align:center;color:#fff;font-size:11px;font-weight:800}
.notice { min-height:65px; display:flex; align-items:center; gap:12px; padding:12px 15px; border-radius:14px; margin-bottom:13px; border:1px solid; }.notice>span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-size:20px;font-weight:900}.notice small{display:block;font-size:8px;letter-spacing:.13em;font-weight:900;opacity:.7}.notice b{display:block;margin-top:3px;font-size:14px}.notice.ok{background:#e5f8ef;border-color:#a8e7c9;color:#087b49}.notice.ok>span{background:#12b86c;color:#fff}.notice.warn{background:#fff7db;border-color:#f1d988;color:#7f5b00}.notice.warn>span{background:#f1b91e;color:#fff}.notice.error{background:#fff0f0;border-color:#ffc3c3;color:#a61d2c}.notice.error>span{background:#dd3349;color:#fff}
.data-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.data-item{min-height:66px;border:1px solid #e2e9f0;background:#f8fafc;border-radius:11px;padding:11px}.data-item.wide{grid-column:1/-1}.data-item small{display:block;font-size:8px;font-weight:900;letter-spacing:.12em;color:#718096;margin-bottom:7px}.data-item strong{display:block;font-size:14px;line-height:1.2;overflow-wrap:anywhere}.data-item.accent{background:#eaf5ff;border-color:#badcff}.data-item.accent strong{color:#006dcc}
.actions{display:grid;grid-template-columns:.7fr 1.3fr;gap:10px;margin:15px 0}.primary,.secondary{height:52px;border-radius:11px;font-size:11px;font-weight:900;letter-spacing:.09em}.primary{border:0;background:linear-gradient(135deg,#0869d7,#019edf);color:#fff;box-shadow:0 8px 18px rgba(4,112,208,.24)}.secondary{border:1px solid #b9c8d6;background:#fff;color:#35516b}.database-button{width:100%;height:48px;border:0;background:transparent;color:#587087;font-size:10px;font-weight:900;letter-spacing:.1em}.database-button span{color:#0878db;font-size:16px;margin-right:7px}
.actions.single{grid-template-columns:1fr}.actions.single .secondary{border-color:#9eb4c8;background:#fff}
.device-modal{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:22px;background:rgba(1,14,28,.9);backdrop-filter:blur(7px)}.device-card{width:min(100%,420px);padding:28px;border-radius:22px;background:#fff;box-shadow:0 26px 75px rgba(0,0,0,.42)}.device-card>span{color:#0876d8;font-size:9px;font-weight:900;letter-spacing:.16em}.device-card h2{font-size:23px;margin:9px 0}.device-card p{font-size:13px;line-height:1.5;color:var(--muted);margin:0 0 20px}.device-card label{display:grid;gap:8px;font-size:9px;font-weight:900;letter-spacing:.12em;color:#52677c}.device-card input{height:54px;border:2px solid #bed0e0;border-radius:11px;padding:0 14px;outline:none;font-weight:900;text-transform:uppercase}.device-card input:focus{border-color:#0877e5;box-shadow:0 0 0 4px #e1f0ff}.device-card button{width:100%;margin-top:18px}
.modal{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:20px;background:rgba(1,12,24,.72);backdrop-filter:blur(5px)}.modal-card{position:relative;width:min(100%,420px);background:#fff;border-radius:20px;padding:28px;box-shadow:0 25px 70px rgba(0,0,0,.4)}.modal-card>button{position:absolute;right:15px;top:13px;border:0;background:#edf2f6;border-radius:50%;width:34px;height:34px;font-size:22px}.modal-card h2{font-size:20px;margin:0 0 8px}.modal-card p{color:var(--muted);font-size:13px}.modal-card>div{display:grid;gap:10px;margin-top:20px}.modal-card a{text-align:center;text-decoration:none;background:#0b64c7;color:#fff;border-radius:10px;padding:15px;font-size:11px;font-weight:900;letter-spacing:.1em}
@media(min-width:700px){.content{padding-top:28px}.data-grid{grid-template-columns:repeat(4,1fr)}.data-item.wide{grid-column:span 2}.scan-card,.data-card{padding:22px}.topbar img{width:132px}.topbar strong{font-size:16px}}
@media(max-width:380px){.login-card{padding:28px 20px}.content{padding-inline:10px}.topbar{padding-inline:12px}.topbar img{width:88px}.topbar strong{font-size:12px}.operator time{display:none}}