@font-face {
    font-family: "Vazirmatn";
    src: url("/assets/fonts/Vazirmatn-wght.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

html, body, button, input, select, textarea {
    font-family: "Vazirmatn", sans-serif;
}

*{box-sizing:border-box}
:root{
  --bg:#070b14;
  --bg2:#0c1321;
  --surface:rgba(15,23,42,.78);
  --surface-2:rgba(17,25,43,.92);
  --border:rgba(148,163,184,.16);
  --text:#eef2ff;
  --muted:#94a3b8;
  --muted2:#64748b;
  --accent:#5b7cff;
  --accent2:#22d3ee;
  --success:#22c55e;
  --danger:#fb7185;
  --shadow:0 18px 60px rgba(0,0,0,.28);
  --radius:22px;
}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;font-family:Tahoma,Arial,sans-serif;background:radial-gradient(circle at 85% -10%,rgba(91,124,255,.18),transparent 30%),radial-gradient(circle at 10% 10%,rgba(34,211,238,.09),transparent 24%),linear-gradient(160deg,var(--bg),var(--bg2) 58%,#08101d);color:var(--text);-webkit-font-smoothing:antialiased}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 80%)}
a{color:inherit}
.app{min-height:100vh}

/* Brand */
.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#5b7cff,#22d3ee);box-shadow:0 10px 30px rgba(91,124,255,.25)}.brand-mark svg{width:25px;height:25px}.brand-name{font-size:19px;font-weight:800;letter-spacing:.2px}.brand-subtitle{font-size:10px;color:#8ea0bd;margin-top:3px;letter-spacing:.4px}

/* Topbar */
.topbar{position:sticky;top:0;z-index:20;min-height:82px;padding:13px 5.5%;display:flex;align-items:center;justify-content:space-between;gap:20px;background:rgba(7,11,20,.72);border-bottom:1px solid var(--border);backdrop-filter:blur(18px)}.topbar-actions{display:flex;align-items:center;gap:14px}.clock-panel{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;align-items:center;column-gap:9px;padding:8px 12px;border:1px solid var(--border);border-radius:14px;background:rgba(15,23,42,.62);box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}.clock-label{grid-column:1/-1;font-size:9px;color:var(--muted2);letter-spacing:.5px}.clock-panel strong{font-size:17px;font-variant-numeric:tabular-nums;color:#fff}.clock-panel small{font-size:9px;color:var(--muted);white-space:nowrap}.user-menu{display:flex;align-items:center;gap:9px}.user-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#172554,#1e3a8a);border:1px solid rgba(125,153,255,.28);color:#dbeafe;font-size:13px;font-weight:800}.username{font-size:12px;color:#cbd5e1;font-weight:700}.topbar-link{text-decoration:none;color:#a8b4ca;font-size:11px;font-weight:800;padding:8px 9px;border-radius:9px;transition:.16s}.topbar-link:hover{color:#fff;background:rgba(255,255,255,.05)}.topbar-link.danger{color:#fda4af}

/* Main */
.dashboard{max-width:1180px;margin:0 auto;padding:48px 26px 38px}.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px}.eyebrow{color:#7dd3fc;font-size:9px;font-weight:900;letter-spacing:1.7px;margin-bottom:10px}.page-heading h1{margin:0;font-size:31px;line-height:1.25;letter-spacing:-.8px}.page-heading p{margin:9px 0 0;color:var(--muted);font-size:13px;line-height:1.9}.connection{display:inline-flex;align-items:center;gap:9px;padding:10px 14px;border-radius:13px;border:1px solid var(--border);background:rgba(15,23,42,.7);color:#cbd5e1;font-size:11px;font-weight:800;white-space:nowrap;box-shadow:var(--shadow)}.connection.online{background:rgba(20,83,45,.22);border-color:rgba(34,197,94,.28);color:#86efac}.connection.offline{background:rgba(127,29,29,.2);border-color:rgba(251,113,133,.28);color:#fda4af}.status-dot{width:8px;height:8px;border-radius:50%;background:#64748b}.status-dot.online{background:var(--success);box-shadow:0 0 0 4px rgba(34,197,94,.11),0 0 14px rgba(34,197,94,.5)}.status-dot.offline{background:var(--danger);box-shadow:0 0 0 4px rgba(251,113,133,.1)}

/* Device */
.device-card{display:grid;grid-template-columns:1.1fr 1.4fr 1fr;gap:18px;padding:20px 22px;margin-bottom:18px;background:linear-gradient(145deg,rgba(15,23,42,.84),rgba(10,17,30,.96));border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.device-meta,.device-pulse{min-width:0}.label{display:block;color:var(--muted2);font-size:10px;font-weight:800;letter-spacing:.5px;margin-bottom:7px}.device-meta strong,.device-pulse strong{font-size:12px;font-weight:800;color:#e2e8f0}.device-meta:first-child strong{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;direction:ltr;display:inline-block;color:#c7d2fe}.last-seen-block{border-inline:1px solid var(--border);padding-inline:20px}.device-pulse{display:flex;align-items:center;gap:10px;justify-self:end}.pulse-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(91,124,255,.14),rgba(34,211,238,.08));color:#93c5fd;border:1px solid rgba(125,153,255,.2)}.pulse-icon svg{width:20px;height:20px}

/* Sensors */
.sensor-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.sensor-card{position:relative;overflow:hidden;min-height:238px;padding:24px;background:linear-gradient(155deg,rgba(17,25,43,.93),rgba(9,15,27,.96));border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.sensor-card:hover{transform:translateY(-3px);border-color:rgba(148,163,184,.28);box-shadow:0 22px 65px rgba(0,0,0,.36)}.sensor-card:after{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.7}.sensor-card.temperature:after{background:linear-gradient(90deg,transparent,#fb923c,transparent)}.sensor-card.humidity:after{background:linear-gradient(90deg,transparent,#38bdf8,transparent)}.sensor-card.soil:after{background:linear-gradient(90deg,transparent,#4ade80,transparent)}.sensor-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:29px}.sensor-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.035);color:#cbd5e1;border:1px solid var(--border)}.sensor-icon svg{width:23px;height:23px}.temperature .sensor-icon{color:#fdba74;background:rgba(249,115,22,.08);border-color:rgba(251,146,60,.18)}.humidity .sensor-icon{color:#7dd3fc;background:rgba(14,165,233,.08);border-color:rgba(56,189,248,.18)}.soil .sensor-icon{color:#86efac;background:rgba(34,197,94,.08);border-color:rgba(74,222,128,.18)}.sensor-kicker{font-size:8px;color:#475569;font-weight:900;letter-spacing:1.5px}.sensor-title{font-size:14px;color:#94a3b8;font-weight:700}.sensor-value{display:flex;align-items:baseline;gap:8px;margin-top:11px;direction:ltr}.sensor-value span{font-size:58px;line-height:1;font-weight:850;letter-spacing:-2.5px;font-variant-numeric:tabular-nums;color:#f8fafc;text-shadow:0 5px 25px rgba(0,0,0,.3)}.sensor-value small{font-size:16px;color:#64748b}.raw-reading{margin-top:17px;font-size:9px;font-weight:900;letter-spacing:1.2px;color:#475569}.raw-reading span{margin-inline-start:5px;color:#94a3b8;letter-spacing:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.footer{display:flex;justify-content:space-between;gap:12px;color:#475569;font-size:10px;margin-top:26px}

/* Auth */
.login-page,.password-page{min-height:100vh;background:radial-gradient(circle at 50% -10%,rgba(91,124,255,.17),transparent 28%),linear-gradient(160deg,var(--bg),var(--bg2))}.login-page{display:flex;align-items:center;justify-content:center}.login-wrapper{width:100%;max-width:440px;padding:20px}.login-card,.password-card{background:rgba(10,16,29,.82);border:1px solid var(--border);backdrop-filter:blur(18px);border-radius:24px;padding:38px;box-shadow:0 25px 80px rgba(0,0,0,.35)}.login-card .brand{margin-bottom:30px}.login-card h1,.password-header h1{margin:0 0 9px;font-size:25px}.login-description,.password-header p{color:var(--muted);line-height:1.9;font-size:13px;margin:0 0 22px}.login-card label,.password-card label{display:block;margin:15px 0 7px;font-size:12px;font-weight:800;color:#cbd5e1}.login-card input,.password-card input{width:100%;padding:13px 14px;border:1px solid rgba(148,163,184,.17);border-radius:11px;font-size:14px;outline:0;background:rgba(255,255,255,.035);color:#f8fafc;transition:.15s}.login-card input::placeholder,.password-card input::placeholder{color:#64748b}.login-card input:focus,.password-card input:focus{border-color:rgba(125,153,255,.55);box-shadow:0 0 0 4px rgba(91,124,255,.08)}.login-card button,.password-card button{width:100%;margin-top:20px;padding:13px;border:0;border-radius:11px;background:linear-gradient(135deg,#5b7cff,#22a9ee);color:#fff;font-size:14px;font-weight:900;cursor:pointer;box-shadow:0 10px 28px rgba(91,124,255,.2)}.login-card button:hover,.password-card button:hover{filter:brightness(1.07)}.error-message,.success-message{padding:12px;border-radius:10px;font-size:11px;margin-bottom:8px}.error-message{background:rgba(127,29,29,.28);color:#fecdd3;border:1px solid rgba(251,113,133,.22)}.success-message{background:rgba(20,83,45,.24);color:#bbf7d0;border:1px solid rgba(34,197,94,.22)}.auth-footer-link{text-align:center;margin-top:20px;font-size:12px;color:var(--muted)}.auth-footer-link a{color:#7dd3fc;text-decoration:none;font-weight:900}.password-shell{max-width:680px;margin:0 auto;padding:46px 22px}.password-header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:25px}.back-link{color:#94a3b8;text-decoration:none;font-size:11px;font-weight:800}.password-hint{margin-top:16px;padding:11px 12px;border-radius:10px;background:rgba(255,255,255,.03);color:#64748b;font-size:10px;line-height:1.8}.password-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}.password-actions button{margin-top:0}.password-actions .secondary{background:rgba(255,255,255,.05);color:#cbd5e1;text-decoration:none;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);box-shadow:none}.password-actions .secondary:hover{background:rgba(255,255,255,.08)}

@media(max-width:900px){.topbar{padding-inline:20px}.dashboard{padding-top:32px}.page-heading{align-items:flex-start;flex-direction:column}.device-card{grid-template-columns:1fr 1fr}.device-pulse{justify-self:start;grid-column:1/-1}.last-seen-block{border-inline-start:1px solid var(--border);border-inline-end:0}}
@media(max-width:700px){.topbar{position:static;flex-direction:column;align-items:stretch}.topbar-actions{justify-content:space-between;flex-wrap:wrap}.user-menu{flex:1;justify-content:flex-end;flex-wrap:wrap}.username{display:none}.dashboard{padding:28px 16px}.page-heading h1{font-size:25px}.page-heading p{font-size:12px}.device-card,.sensor-grid{grid-template-columns:1fr}.last-seen-block{border-inline:0;padding-inline:0}.device-pulse{grid-column:auto}.footer{flex-direction:column}.password-actions{grid-template-columns:1fr}}


/* =========================
   Theme Toggle
========================= */
.theme-toggle{appearance:none;border:1px solid var(--border);background:var(--surface);color:var(--muted);height:36px;padding:0 11px;border-radius:11px;display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-family:inherit;font-size:10px;font-weight:800;transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease}.theme-toggle:hover{color:var(--text);background:var(--surface-2);border-color:rgba(125,153,255,.35);transform:translateY(-1px)}.theme-toggle .theme-icon{width:16px;height:16px}.theme-toggle .moon-icon{display:none}.theme-toggle span{white-space:nowrap}

/* =========================
   Light Theme
========================= */
html[data-theme="light"]{
  --bg:#f4f7fb;
  --bg2:#eaf0f7;
  --surface:rgba(255,255,255,.86);
  --surface-2:#ffffff;
  --border:rgba(15,23,42,.10);
  --text:#172033;
  --muted:#64748b;
  --muted2:#94a3b8;
  --shadow:0 18px 55px rgba(15,23,42,.10);
}
html[data-theme="light"] body{background:radial-gradient(circle at 85% -10%,rgba(91,124,255,.15),transparent 30%),radial-gradient(circle at 10% 10%,rgba(34,211,238,.08),transparent 24%),linear-gradient(160deg,var(--bg),var(--bg2) 58%,#f7fafe);color:var(--text)}
html[data-theme="light"] body:before{background-image:linear-gradient(rgba(15,23,42,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,42,.035) 1px,transparent 1px);}
html[data-theme="light"] .topbar{background:rgba(255,255,255,.78)}
html[data-theme="light"] .brand-subtitle{color:#64748b}
html[data-theme="light"] .clock-panel{background:rgba(255,255,255,.82)}
html[data-theme="light"] .clock-label{color:#94a3b8}
html[data-theme="light"] .clock-panel strong{color:#172033}
html[data-theme="light"] .clock-panel small{color:#64748b}
html[data-theme="light"] .username{color:#334155}
html[data-theme="light"] .user-avatar{background:linear-gradient(145deg,#e0e7ff,#dbeafe);color:#3730a3;border-color:rgba(79,70,229,.18)}
html[data-theme="light"] .topbar-link{color:#475569}
html[data-theme="light"] .topbar-link:hover{color:#0f172a;background:rgba(15,23,42,.05)}
html[data-theme="light"] .theme-toggle .sun-icon{display:none}
html[data-theme="light"] .theme-toggle .moon-icon{display:block}
html[data-theme="light"] .connection{background:rgba(255,255,255,.78);color:#334155}
html[data-theme="light"] .device-card{background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(247,250,255,.98))}
html[data-theme="light"] .device-meta strong,html[data-theme="light"] .device-pulse strong{color:#334155}
html[data-theme="light"] .device-meta:first-child strong{color:#3730a3}
html[data-theme="light"] .pulse-icon{background:linear-gradient(145deg,rgba(91,124,255,.10),rgba(34,211,238,.06));color:#4f46e5}
html[data-theme="light"] .sensor-card{background:linear-gradient(155deg,rgba(255,255,255,.96),rgba(246,249,253,.98));box-shadow:var(--shadow)}
html[data-theme="light"] .sensor-card:hover{border-color:rgba(79,70,229,.22);box-shadow:0 22px 55px rgba(15,23,42,.13)}
html[data-theme="light"] .sensor-kicker{color:#94a3b8}
html[data-theme="light"] .sensor-title{color:#64748b}
html[data-theme="light"] .sensor-value span{color:#172033;text-shadow:none}
html[data-theme="light"] .sensor-value small{color:#64748b}
html[data-theme="light"] .raw-reading{color:#94a3b8}
html[data-theme="light"] .raw-reading span{color:#475569}
html[data-theme="light"] .footer{color:#94a3b8}
html[data-theme="light"] .page-heading p{color:#64748b}

@media(max-width:700px){.theme-toggle{padding-inline:10px}.theme-toggle span{font-size:9px}}


/* Hexotech theme logos */
.brand-mark{
    width:130px;
    height:58px;
    border-radius:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:transparent;
    box-shadow:none;
}

.brand-mark img{
    display:block;
    width:130px;
    height:auto;
    max-height:58px;
    object-fit:contain;
}

.brand-mark .logo-light{
    display:none;
}

html[data-theme="light"] .brand-mark .logo-dark{
    display:none;
}

html[data-theme="light"] .brand-mark .logo-light{
    display:block;
}

html[data-theme="dark"] .brand-mark .logo-dark{
    display:block;
}

html[data-theme="dark"] .brand-mark .logo-light{
    display:none;
}