:root{
  --bg: #0b0d10;
  --card: rgba(255,255,255,0.08);
  --text: #e7eaee;
  --muted: #9aa4b2;
  --primary: #4f8cff;
  --primary-700: #3f74d1;
  --success: #35b36b;
  --error: #ff5a67;
  --ring: rgba(79, 140, 255, .45);
  --border: rgba(255,255,255,0.14);
  --input: rgba(255,255,255,0.06);
  --code: rgba(16, 18, 22, 0.65);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 16px;
}
@media (prefers-color-scheme: light){
  :root{
    --bg: #f6f7fb;
    --card: rgba(255,255,255,0.9);
    --text: #0f1420;
    --muted: #5b6574;
    --primary: #3d74ff;
    --primary-700: #2f5acc;
    --success: #1f9957;
    --error: #d6454f;
    --ring: rgba(61,116,255,.35);
    --border: rgba(15,20,32,0.08);
    --input: rgba(15,20,32,0.04);
    --code: #f2f4f7;
    --shadow: 0 12px 28px rgba(16,24,40,.12);
  }
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
    margin:0;
    min-height:100svh;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    color: var(--text);
    background:
        radial-gradient(1200px 600px at 10% -10%, rgba(79,140,255,.15), transparent 60%),
        radial-gradient(1000px 500px at 110% 10%, rgba(53,179,107,.17), transparent 60%),
        var(--bg);
    display:flex;
    justify-content:flex-start;
    align-items:center;
    padding: 32px 16px;
}

.shell{
    width: 100%;
    max-width: 720px;
    backdrop-filter: blur(10px);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: clip;
}

.shell > header{
    padding: 22px 24px;
    border-bottom: 1px solid var(--border);
    display:flex; align-items:center; gap:12px;
}
.logo{
    width: 36px; height: 36px; border-radius: 10px;
    background: linear-gradient(135deg, var(--primary), #7aa8ff);
    display:grid; place-items:center; color:white; font-weight:700;
    box-shadow: 0 6px 18px rgba(61,116,255,.35);
    letter-spacing: .5px;
    }
.title{ display:flex; flex-direction:column; }
.title h1{ font-size: 18px; line-height: 1.2; margin: 0; }
.title p{ margin: 2px 0 0; color: var(--muted); font-size: 13px; }

main{ padding: 24px; }

form{ display:grid; gap: 12px; grid-template-columns: 1fr; }

.row{ display:flex; gap: 10px; }
.row > .field{ flex:1; }

.field{ display:flex; flex-direction:column; gap:6px; }
label{ font-size: 13px; color: var(--muted); }

.input{
    display:flex; align-items:center; gap:8px;
    background: var(--input);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    transition: box-shadow .2s, border-color .2s, transform .06s;
}
.input:focus-within{
    border-color: var(--primary);
    box-shadow: 0 0 0 5px var(--ring);
}
.input input{
    border:0; outline:0; width:100%;
    background:transparent; color: var(--text);
    font-size: 15px;
}
input::placeholder{ color: color-mix(in oklab, var(--muted) 70%, transparent); }

.actions{ display:flex; gap:10px; align-items:center; margin-top: 4px; }

button{
    -webkit-tap-highlight-color: transparent;
    border: 1px solid transparent;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--primary);
    color: white; font-weight: 600; letter-spacing: .2px;
    cursor: pointer;
    transition: transform .06s ease, background .2s ease, box-shadow .2s ease;
    box-shadow: 0 8px 18px rgba(61,116,255,.28);
}
button:active{ transform: translateY(1px); }
button:disabled{ opacity:.6; cursor:not-allowed; transform:none; box-shadow:none; }

.ghost{
    background: transparent; color: var(--primary);
    border-color: color-mix(in oklab, var(--primary) 45%, transparent);
    box-shadow: none;
}
.ghost:hover{
    background: color-mix(in oklab, var(--primary) 8%, transparent);
    border-color: var(--primary);
}

.msg{
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14px;
    display:none;
}
.msg.success{
    display:block; color: var(--success);
    background: color-mix(in oklab, var(--success) 10%, transparent);
    border:1px solid color-mix(in oklab, var(--success) 30%, transparent);
}
.msg.error{
    display:block; color: var(--error);
    background: color-mix(in oklab, var(--error) 10%, transparent);
    border:1px solid color-mix(in oklab, var(--error) 30%, transparent);
}

.result{
    margin-top: 16px;
    border: 1px solid var(--border);
    background: linear-gradient(to bottom right,
        color-mix(in oklab, var(--card) 92%, transparent),
        color-mix(in oklab, var(--card) 100%, transparent));
    border-radius: 14px;
    padding: 14px;
    display:none;
}

.kv{ display:grid; grid-template-columns: 110px 1fr auto; gap: 10px 12px; align-items:center; }
.kv .k{ color: var(--muted); font-size: 13px; }
.kv a, .kv code{ word-break: break-all; }

code{
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    background: var(--code);
    padding: .2rem .35rem;
    border-radius: 8px;
    font-size: 13px;
    border: 1px solid var(--border);
}

.copy-wrap{display:flex; align-items:center; gap:8px;}
.copy-btn{
    display:inline-flex; align-items:center; gap:6px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--input);
    border: 1px solid var(--border);
    color: var(--text); font-size: 13px; cursor: pointer;
}
.copy-btn:hover{border-color: var(--primary);}
.copy-btn:active{transform: translateY(1px);}

.spinner{
    --sz: 16px;
    width: var(--sz); height: var(--sz);
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: white;
    border-radius: 50%;
    animation: spin .8s linear infinite;
    display:none;
    margin-left: 6px;
}
.loading .spinner{ display:inline-block; }
.loading .btn-text{ opacity:.85; }

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

footer{
    padding: 18px 24px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 12px;
    display:flex; justify-content:space-between; gap: 10px; flex-wrap: wrap;
}
.hint{opacity:.9;}

.stack{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap: 50px;
    width: 100%;
}

.page-header{
  text-align:center;
  margin:0;
}
.app-title{
    margin: 0 0 4px 0;
    font-size: clamp(28px, 4vw, 36px);
}
.app-subtitle{
    margin: 0; 
    color: var(--muted); 
    font-size: 14px; 
}