@font-face {
  font-family: 'Artegra-black';
  src: url("../font/ArtegraSans-Black.woff2")format('truetype');
}

@font-face {
  font-family: 'Artegra-bold';
  src: url("../font/ArtegraSans-Bold.woff2")format('truetype');
}

@font-face {
  font-family: 'Artegra-semibold';
  src: url("../font/ArtegraSans-SemiBold.woff2")format('truetype');
}

@font-face {
  font-family: 'Artegra-medium';
  src: url("../font/ArtegraSans-Medium.woff2")format('truetype');
}

@font-face {
  font-family: 'Artegra-regular';
  src: url("../font/ArtegraSans-Regular.woff2")format('truetype');
}

@font-face {
  font-family: 'Artegra-light';
  src: url("../font/ArtegraSans-Light.woff2")format('truetype');
}

:root{--bg:#000;--fg:#fff;--muted:#c9c9c9;--line:#1b1b1b;--panel:#0a0a0a;--accent:#ffffff;--err:#ff5c5c}
:root.light{--bg:#fff;--fg:#000;--muted:#555;--line:#e9e9e9;--panel:#fafafa;--accent:#000;--err:#d00}
*{box-sizing:border-box}

html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font:500 15px/1.6 Artegra-bold,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial}
a{color:var(--fg);text-decoration:none}

.wrapper{min-height:100dvh;display:grid;place-items:center;padding:24px}

.card{width:100%;max-width:480px;border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:22px;position:relative;overflow:hidden}

.brand{display:flex;align-items:center;gap:10px;margin-top:5px;margin-bottom:20px;margin-left: 31%;}

.brand img{width:34px;height:34px;border-radius:6px;margin-top:8px;background:#fff}

.brand .name{font-weight:900;font-size: 25px; margin-top: 4px; letter-spacing:.5px}

h1{font-size:24px;margin:6px 0 0px}

p.muted{color:var(--muted);margin:0 0 15px}

label{display:block;font-weight:700;margin:10px 0 5px}

.input{width:100%;padding:12px;border:1px solid var(--line);border-radius:12px;background:color-mix(in oklab, var(--bg) 90%, var(--fg) 10%);color:var(--fg)}

.actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:999px;border:1px solid var(--accent);background:var(--accent);color:color-mix(in oklab, var(--bg) 90%, var(--fg) 10%);font-weight:900;cursor:pointer}

.btn:hover {background:var(--bg);color:var(--fg);transition: all .3s ease-out 0s;}

.btn.ghost{background:transparent;color:var(--fg)}

.btn.ghost:hover {background:var(--fg);color:var(--bg);transition: all .3s ease-out 0s;}

.btn.full{width:100%}

.btn.small{padding:4px 16px}

.row{display:grid;gap:10px;grid-template-columns:1fr 1fr}

@media (max-width:580px){.row{grid-template-columns:1fr}}

.hr{height:1px;background:var(--line);margin:16px 0}

small.help{color:var(--muted)}

.error{border-color:var(--err)!important}

.errtxt{color:var(--err);font-size:12px;margin-top:6px}

footer{margin-top:35px;margin-bottom:10px;color:var(--muted);text-align:center;font-size:14px}

.social{display:grid;gap:8px}

.social .sbtn{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:12px;background:color-mix(in oklab, var(--bg) 94%, var(--fg) 6%);cursor:pointer;justify-content:center}

.social .icon{width:18px;height:18px;border-radius:4px;background:#fff}

.split{display:flex;align-items:center;gap:10px;margin:12px 0}

.split .bar{flex:1;height:1px;background:var(--line)}

.check{display:flex;align-items:center;gap:8px;font-size:14px}

.loading{position:absolute;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center}

:root.light .loading{background:rgba(0,0,0,.08)}

.loading.show{display:flex}

.spinner{width:54px;height:54px;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}
:root.light .spinner{border:3px solid rgba(0,0,0,.2);border-top-color:#000}

@keyframes spin{to{transform:rotate(360deg)}}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.7);display:none;align-items:center;justify-content:center;padding:16px;z-index:20}

.modal.show{display:flex}

.modal .box{width:100%;max-width:420px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px}

.modal .box h3{margin:0 0 10px;font-size:18px}

.qr{display:flex;gap:14px;align-items:center}

.codebox{border:1px solid var(--line);background:color-mix(in oklab, var(--bg) 94%, var(--fg) 6%);border-radius:10px;padding:10px;font-family:ui-monospace, SFMono-Regular, Menlo, monospace;word-break:break-all}

.copy{padding:8px 10px;border:1px solid var(--line);background:var(--accent);color:color-mix(in oklab, var(--bg) 90%, var(--fg) 10%);border-radius:10px;font-weight:800;cursor:pointer}

/* reCAPTCHA Stub */
.captcha{border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;align-items:center;justify-content:space-between;gap:10px;background:color-mix(in oklab, var(--bg) 94%, var(--fg) 6%)}

/* Password strength */
.strength{height:6px;border-radius:6px;background:var(--line);overflow:hidden}

.strength>div{height:100%;width:0;background:linear-gradient(90deg,#ff5c5c,#ffd15c,#00d08a)}

/* Topbar for index */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}

select.theme{padding:8px 12px;border-radius:12px;border:1px solid var(--line);background:color-mix(in oklab, var(--bg) 94%, var(--fg) 6%);color:var(--fg)}

.grid-index{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}

@media (max-width:980px){.grid-index{grid-template-columns:1fr}}

.preview{border:1px dashed var(--line);border-radius:12px;overflow:hidden}

.preview iframe{width:100%;height:520px;border:0;background:var(--panel)}