:root{--bg:#eaf6ff;--card:rgba(255,255,255,.42);--card2:rgba(255,255,255,.28);--stroke:rgba(10,60,110,.12);--stroke2:rgba(255,255,255,.65);--text:#071627;--muted:rgba(7,22,39,.62);--accent:#2f7dff;--accent2:#38bdf8;--danger:#e11d48;--warn:#f59e0b;--shadow:0 24px 80px rgba(8,40,70,.18);--shadow2:0 12px 32px rgba(8,40,70,.12)} *{box-sizing:border-box} body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:var(--text);background:radial-gradient(1200px 700px at 20% 10%,rgba(47,125,255,.24),transparent 60%),radial-gradient(1100px 650px at 80% 18%,rgba(56,189,248,.22),transparent 55%),radial-gradient(900px 520px at 60% 92%,rgba(34,197,94,.10),transparent 60%),linear-gradient(180deg,#f7fcff 0%,#eaf6ff 60%,#e6f2ff 100%);min-height:100vh} div.bg{position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(rgba(7,22,39,.14) 1px,transparent 1px);background-size:34px 34px;opacity:.07; z-index:0} /* Compatibility: if any template uses , don't fade the whole page. We render the dot background via ::before instead of opacity on body. */ body.bg{position:relative} body.bg::before{ content:""; position:fixed; inset:0; pointer-events:none; background-image:radial-gradient(rgba(7,22,39,.14) 1px,transparent 1px); background-size:34px 34px; opacity:.07; z-index:0; } body.bg > *{position:relative; z-index:1} /* Ensure landing content sits above background layer div.bg */ .landing-shell{position:relative; z-index:1} a{color:rgba(7,22,39,.86)} /* ---------- Login ---------- */ .shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px} .card{width:min(440px,92vw);background:var(--card);border:1px solid var(--stroke);border-radius:22px;box-shadow:var(--shadow);backdrop-filter:blur(16px) saturate(1.15);padding:26px} .head{display:flex;gap:14px;align-items:center;margin-bottom:18px} .logo{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(47,125,255,.92),rgba(56,189,248,.82));font-weight:900} .name{font-size:18px;font-weight:900;letter-spacing:.2px} .sub{font-size:12px;color:var(--muted);margin-top:2px} .field{margin-top:12px} .label{display:block;font-size:12px;color:var(--muted);margin:0 0 6px 2px} .input{width:100%;padding:12px 12px;border-radius:12px;border:1px solid var(--stroke);background:rgba(255,255,255,.55);color:var(--text);outline:none} .input:focus{border-color:rgba(124,92,255,.7);box-shadow:0 0 0 4px rgba(124,92,255,.18)} .btn{padding:12px 14px;border-radius:12px;border:1px solid rgba(47,125,255,.45);background:linear-gradient(135deg,rgba(47,125,255,.92),rgba(56,189,248,.72));color:white;font-weight:900;cursor:pointer} .btn:hover{filter:brightness(1.06)} .btn:disabled{opacity:.6;cursor:not-allowed} .btn.full{width:100%} .btn.ghost{border:1px solid var(--stroke);background:rgba(255,255,255,.38);font-weight:800;color:#0b1220} .btn.ghost:hover{filter:brightness(1.04);color:#0b1220} .btn.danger{border:1px solid rgba(255,92,122,.55);background:linear-gradient(135deg,rgba(255,92,122,.9),rgba(255,92,122,.55))} .msg{margin-top:12px;font-size:12px;color:#b42318;min-height:16px} .footer{margin-top:14px;font-size:12px;color:var(--muted);display:flex;justify-content:space-between;gap:12px} .footer a{color:rgba(7,22,39,.76);text-decoration:none} .footer a:hover{text-decoration:underline} /* ---------- App Shell ---------- */ .topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--stroke);background:rgba(255,255,255,.32);backdrop-filter:blur(14px) saturate(1.1)} .brand{font-weight:900;display:flex;align-items:center;gap:10px;letter-spacing:.2px} .badge{width:30px;height:30px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(47,125,255,.92),rgba(56,189,248,.82))} .topright{display:flex;gap:10px;align-items:center} .pill{display:flex;gap:8px;align-items:center;padding:8px 10px;border-radius:999px;border:1px solid var(--stroke);background:rgba(255,255,255,.32);font-size:12px;color:var(--muted)} .select{border:1px solid var(--stroke);background:rgba(255,255,255,.38);color:var(--text);border-radius:10px;padding:6px 8px;outline:none} .layout{display:grid;grid-template-columns:260px 1fr;min-height:calc(100vh - 60px)} .sidebar{border-right:1px solid var(--stroke);background:rgba(255,255,255,.22);backdrop-filter:blur(8px);padding:14px 12px;display:flex;flex-direction:column} .nav{display:flex;flex-direction:column;gap:6px} .nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;text-decoration:none;color:rgba(7,22,39,.86);border:1px solid transparent;background:transparent;font-weight:800;font-size:13px} .nav a:hover{background:rgba(255,255,255,.30);border-color:rgba(10,60,110,.10)} .nav a.active{background:linear-gradient(135deg,rgba(47,125,255,.18),rgba(56,189,248,.14));border-color:rgba(47,125,255,.22)} .nav .cap{margin:10px 8px 4px 8px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(7,22,39,.45)} .sidefoot{margin-top:auto;font-size:12px;color:var(--muted);padding:10px 8px;display:flex;gap:8px;align-items:center} .sidefoot .link{color:rgba(7,22,39,.62);text-decoration:none} .sidefoot .link:hover{text-decoration:underline} .content{padding:20px 22px} .page{max-width:1180px} /* ---------- Banner / callout ---------- */ .banner{max-width:1180px;margin:0 0 14px 0;padding:14px 14px;border-radius:18px;border:1px solid rgba(245,158,11,.35);background:rgba(245,158,11,.12);display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:var(--shadow2);backdrop-filter:blur(12px) saturate(1.06)} .banner__title{font-weight:950} .banner__text{font-size:12px;color:rgba(7,22,39,.72);margin-top:4px} .banner__actions{display:flex;gap:10px;flex-wrap:wrap} /* ---------- Components ---------- */ .h1{font-size:20px;font-weight:950;margin:0 0 10px 0} .h2{font-size:14px;font-weight:900;margin:0 0 10px 0;color:rgba(7,22,39,.9)} .muted{color:var(--muted)} .hint{font-size:12px;color:var(--muted);margin-top:6px} .cardbox{background:var(--card);border:1px solid var(--stroke);border-radius:18px;padding:16px;box-shadow:var(--shadow2);backdrop-filter:blur(14px) saturate(1.12)} .stack{display:flex;flex-direction:column;gap:14px} .row{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid rgba(10,60,110,.08)} .row:last-child{border-bottom:none} .row .k{color:var(--muted);font-size:12px;min-width:140px} .row .v{font-weight:900} .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px} .table{width:100%;border-collapse:separate;border-spacing:0 10px} .table th{font-size:12px;color:rgba(7,22,39,.55);text-align:left;padding:0 10px} .table td{background:rgba(255,255,255,.36);border:1px solid rgba(10,60,110,.10);padding:12px 10px} .table tr td:first-child{border-top-left-radius:14px;border-bottom-left-radius:14px} .table tr td:last-child{border-top-right-radius:14px;border-bottom-right-radius:14px} .code{font-size:11px;color:rgba(7,22,39,.50)} .badgeDot{display:inline-flex;align-items:center;gap:8px} .dot{width:8px;height:8px;border-radius:999px;background:rgba(34,197,94,.85)} .dot.off{background:rgba(255,92,122,.85)} .form{display:grid;grid-template-columns:1fr 1fr;gap:12px} .form .full{grid-column:1 / -1} .input2{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--stroke);background:rgba(255,255,255,.55);color:var(--text);outline:none} .input2:focus{border-color:rgba(124,92,255,.7);box-shadow:0 0 0 4px rgba(124,92,255,.18)} .lbl{font-size:11px;color:rgba(7,22,39,.58);margin:0 0 6px 2px} .toast{position:fixed;right:22px;bottom:22px;z-index:50;background:rgba(255,255,255,.62);border:1px solid rgba(10,60,110,.14);backdrop-filter:blur(10px);padding:12px 14px;border-radius:14px;max-width:380px;box-shadow:var(--shadow2);font-size:13px} /* ---------- Modal ---------- */ .modal{position:fixed;inset:0;z-index:100} .modal__backdrop{position:absolute;inset:0;background:rgba(10,22,39,.30);backdrop-filter:blur(2px)} .modal__card{position:relative;width:min(720px,92vw);margin:8vh auto;background:rgba(255,255,255,.55);border:1px solid rgba(10,60,110,.14);border-radius:18px;box-shadow:var(--shadow);backdrop-filter:blur(16px) saturate(1.1);overflow:hidden} .modal__head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid rgba(10,60,110,.10)} .modal__title{font-weight:950} .modal__body{padding:14px 16px} .modal__foot{padding:12px 16px;border-top:1px solid rgba(10,60,110,.10);display:flex;justify-content:flex-end;gap:10px} .iconbtn{width:34px;height:34px;border-radius:12px;border:1px solid rgba(10,60,110,.14);background:rgba(255,255,255,.32);color:var(--text);cursor:pointer} .iconbtn:hover{filter:brightness(1.05)} /* ---------- Quick success overlay (QR clock) ---------- */ .okOverlay{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center} .okBackdrop{position:absolute;inset:0;background:rgba(10,22,39,.32);backdrop-filter:blur(2px)} .okCard{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;width:min(420px,86vw);padding:22px 18px;border-radius:22px;border:1px solid rgba(10,60,110,.14);background:rgba(255,255,255,.65);box-shadow:var(--shadow);backdrop-filter:blur(16px) saturate(1.1)} .okCheck{width:78px;height:78px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:rgba(34,197,94,.16);color:rgba(34,197,94,.95);border:1px solid rgba(34,197,94,.22)} .okCheck svg{width:44px;height:44px} .okText{font-weight:950;font-size:18px;color:rgba(7,22,39,.92);text-align:center} @media (max-width:980px){ .layout{grid-template-columns:1fr} .sidebar{position:sticky;top:60px;z-index:15;flex-direction:row;overflow:auto;gap:8px} .nav{flex-direction:row;align-items:center} .nav .cap{display:none} .sidefoot{display:none} } /* Landing */ .glass{background:var(--card);border:1px solid var(--stroke);border-radius:22px;box-shadow:var(--shadow2);backdrop-filter:blur(16px) saturate(1.12)} .landing-shell{max-width:1160px;margin:0 auto;padding:22px} .landing-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px} .brand-logo{height:42px} .landing-nav{display:flex;gap:14px;align-items:center;flex-wrap:wrap} .nav-link{color:rgba(11,18,32,.75);font-weight:800;text-decoration:none} .nav-link:hover{text-decoration:underline} .hero{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:stretch;margin:18px 0 18px} .hero h1{font-size:44px;line-height:1.05;margin:0 0 10px 0;color:rgba(11,18,32,.92)} .lead{font-size:16px;line-height:1.55;color:rgba(11,18,32,.72);margin:0 0 16px 0} .hero-cta{display:flex;gap:12px;flex-wrap:wrap} .hero-mini{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px;color:rgba(11,18,32,.62);font-weight:800;font-size:12px} .hero-card{padding:18px;display:flex;align-items:center;justify-content:center;min-height:320px} .hero-card img{width:100%;height:auto;display:block;border-radius:16px} .features{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:10px 0 18px} .feat{padding:16px} .feat img{width:100%;height:160px;object-fit:contain;display:block;margin-bottom:10px} .feat h3{margin:0 0 6px 0;font-size:18px} .feat p{margin:0;color:rgba(11,18,32,.68);line-height:1.5} .how{padding:18px;margin-top:14px} .how h2{margin:0 0 8px 0} .how ol{margin:0 0 14px 18px;color:rgba(11,18,32,.70);line-height:1.6} .how-cta{display:flex;gap:12px;flex-wrap:wrap} .section{margin-top:14px} .section h2{margin:0 0 10px 0} .fineprint{font-size:12px;color:rgba(11,18,32,.62);line-height:1.5} .pricing{padding:18px} .pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:12px} .price-card{padding:16px;display:flex;flex-direction:column;gap:10px} .price-name{font-weight:950;font-size:14px;color:rgba(11,18,32,.88)} .price-value{font-size:34px;font-weight:950;line-height:1} .price-sub{font-size:12px;color:rgba(11,18,32,.62);font-weight:800} .price-list{margin:0;padding-left:18px;color:rgba(11,18,32,.70);line-height:1.6} .price-examples{margin-top:10px;display:flex;flex-direction:column;gap:6px} .example{font-size:12px;color:rgba(11,18,32,.70);font-weight:800} .contact-box{padding:18px;display:flex;align-items:flex-start;justify-content:space-between;gap:14px} .contact-box p{margin:0;color:rgba(11,18,32,.70);line-height:1.6} .contact-actions{display:flex;gap:12px;flex-wrap:wrap} /* Contact page */ .contact-form{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px} .notice{margin:0 0 12px 0;padding:10px 12px;border-radius:14px;border:1px solid rgba(10,60,110,.14);font-weight:800;font-size:13px} .notice.ok{background:rgba(46,204,113,.14)} .notice.err{background:rgba(231,76,60,.12)} @media (max-width: 920px){ .pricing-grid{grid-template-columns:1fr} .contact-box{flex-direction:column} .form-row{grid-template-columns:1fr} } .landing-footer{display:flex;gap:10px;justify-content:center;align-items:center;margin:20px 0 6px;color:rgba(11,18,32,.55);font-weight:800;font-size:12px} .landing-footer a{color:rgba(11,18,32,.65);text-decoration:none} .landing-footer a:hover{text-decoration:underline} @media (max-width: 920px){ .hero{grid-template-columns:1fr; } .features{grid-template-columns:1fr} .hero h1{font-size:36px} } .auth-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px} .auth-card{width:min(520px,92vw)}