:root{
        --bg:#f7f8fa;
        --card:#ffffff;
        --text:#111827;
        --muted:#6b7280;
        --border:#e5e7eb;
        --focus:#2563eb;
        --ok:#065f46;
        --err:#991b1b;
        --warn:#92400e;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
        margin:0; background:var(--bg); color:var(--text);
        font-family: system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
        -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    }
    .container{max-width:760px; margin:0 auto; padding:24px 16px 48px;}
    header{ margin:8px 0 16px; }
    h1{ font-size: clamp(20px, 2.6vw, 30px); margin:0 0 6px; font-weight:700; line-height:1.2; }
    p.lead{ margin:0; color:var(--muted); font-size:14px }

    .notice{
        margin:16px 0; padding:12px 14px; border:1px solid #fde68a; background:#fffbeb; color:var(--warn);
        border-radius:12px; font-size:14px;
    }

    .card{
        background:var(--card); border:1px solid var(--border);
        border-radius:14px; padding:16px; box-shadow:0 2px 10px rgba(0,0,0,.03);
    }

    form .field{ margin-bottom:14px; }
    label{ display:block; font-size:13px; color:var(--muted); margin-bottom:6px; }
    input[type="text"], select, button{ font-size:16px; }
    input[type="text"], select{
        width:100%; padding:12px 14px; border-radius:10px;
        border:1px solid var(--border); background:#fff; color:var(--text);
        outline:none; transition:border .15s ease, box-shadow .15s ease;
        -webkit-appearance: none; appearance: none;
    }
    input[type="text"]:focus, select:focus{
        border-color:var(--focus); box-shadow:0 0 0 3px rgba(37,99,235,.15);
    }
    .hint{ font-size:12px; color:var(--muted); margin-top:6px; }

    .actions{ display:flex; gap:10px; margin-top:10px; }
    button{
        padding:12px 16px; border-radius:10px; border:1px solid var(--border);
        background:#111827; color:#fff; cursor:pointer; font-weight:600;
        transition: filter .15s ease, transform .06s ease;
    }
    button.secondary{ background:#fff; color:var(--text); }
    button:disabled{ opacity:.5; cursor:not-allowed; }
    button:active{ transform: translateY(1px); }

    .status{
        margin-top:12px; font-size:14px; padding:10px 12px; border-radius:8px; display:none;
        border:1px solid var(--border); color:var(--muted); background:#fafafa;
    }
    .status.show{ display:block; }
    .status.ok{ border-color: rgba(5,150,105,.35); color:#065f46; background:#ecfdf5; }
    .status.err{ border-color: rgba(220,38,38,.35); color:var(--err); background:#fef2f2; }
    .status.warn{ border-color:#facc15; color:var(--warn); background:#fffbeb; }

    .result{ display:none; margin-top:16px; }
    .result.show{ display:block; }
    .result .title{ font-weight:600; margin:0 0 4px; }
    .result .desc{ color:var(--muted); margin:0 0 12px; font-size:14px; }
    .result .linkbox{
        border:1px dashed var(--border); background:#fff; border-radius:10px;
        padding:12px; word-break:break-all; font-size:15px;
    }
    .result .open{
        margin-top:12px; display:inline-block; text-decoration:none; font-weight:600;
        background:#111827; color:#fff; padding:12px 16px; border-radius:10px;
    }

    @media (max-width:480px){
        .actions{ flex-direction:column; }
        button{ width:100%; }
    }