:root{
    --bg:#f4f7fb;
    --card:#ffffff;
    --text:#0f172a;
    --muted:#475569;
    --border:#cbd5e1;
    --focus:#2563eb;
    --btn:#2563eb;
    --btnText:#ffffff;
    --shadow:0 10px 30px rgba(15,23,42,.08);
    --radius:18px;
}

@media (prefers-color-scheme: dark){
    :root{
        --bg:#0b1220;
        --card:#0f172a;
        --text:#e5e7eb;
        --muted:#94a3b8;
        --border:#23314a;
        --focus:#60a5fa;
        --btn:#3b82f6;
        --btnText:#0b1220;
        --shadow:none;
    }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    background:var(--bg);
    color:var(--text);
}

[hidden]{display:none !important}

.container{max-width:1100px;margin:28px auto;padding:0 18px}

.header{display:flex;gap:14px;align-items:center;margin-bottom:18px}
.logo{width:44px;height:44px;flex:0 0 44px}
.brand__title{font-weight:800;font-size:26px;letter-spacing:.2px}
.brand__sub{color:var(--muted);margin-top:2px}

.card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:22px;
}

.h1{margin:0 0 10px 0;font-size:40px;line-height:1.12}
.hint{margin:0 0 18px 0;color:var(--muted);font-size:22px}
.hint b{color:var(--focus);font-weight:700}

.form{display:grid;gap:14px}

.label{display:block;margin:0 0 8px 2px;color:var(--muted);font-size:18px}

.input{
    width:100%;
    padding:16px 18px;
    border-radius:16px;
    border:1px solid var(--border);
    background:transparent;
    color:var(--text);
    font-size:28px;
    outline:none;
}
.input:focus{
    border-color:var(--focus);
    box-shadow:0 0 0 4px rgba(37,99,235,.16);
}

.row{display:flex;align-items:center;justify-content:flex-end;margin-top:4px}

.btn{
    height:56px;
    padding:0 22px;
    border-radius:16px;
    border:0;
    font-size:20px;
    font-weight:700;
    background:var(--btn);
    color:var(--btnText);
    cursor:pointer;
}
.btn:disabled{
    opacity:.45;
    cursor:not-allowed;
}

.dd{position:relative}
.dd__btn{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:16px 18px;
    border-radius:16px;
    border:1px solid var(--border);
    background:transparent;
    color:var(--text);
    font-size:22px;
    cursor:pointer;
}
.dd__btn:focus{
    border-color:var(--focus);
    box-shadow:0 0 0 4px rgba(37,99,235,.16);
    outline:none;
}
.dd__chev{
    width:0;height:0;
    border-left:8px solid transparent;
    border-right:8px solid transparent;
    border-top:10px solid var(--muted);
}

.dd__menu{
    position:absolute;
    left:0;right:0;
    top:calc(100% + 8px);
    max-height:320px;
    overflow:auto;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow:var(--shadow);
    padding:8px;
    z-index:20;
}
.dd__item{
    width:100%;
    text-align:left;
    border:0;
    background:transparent;
    color:var(--text);
    padding:12px 12px;
    border-radius:12px;
    font-size:18px;
    cursor:pointer;
}
.dd__item:hover{background:rgba(37,99,235,.10)}
.dd__item[aria-selected="true"]{background:rgba(37,99,235,.16)}

.err{
    margin-top:8px;
    padding:12px 14px;
    border-radius:14px;
    border:1px solid rgba(239,68,68,.35);
    background:rgba(239,68,68,.10);
    color:var(--text);
}

.sep{height:1px;background:var(--border);margin:8px 0}

.help{color:var(--muted);font-size:18px;line-height:1.45}
.help a{color:var(--focus);text-decoration:none}
.help a:hover{text-decoration:underline}

.footer{margin-top:18px;color:var(--muted);font-size:18px}

@media (max-width:720px){
    .h1{font-size:30px}
    .hint{font-size:18px}
    .input{font-size:22px}
    .dd__btn{font-size:18px}
    .row{justify-content:stretch}
    .btn{width:100%}
}

.media {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.media__item {
    max-height: 180px;
    height: 180px;
    width: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    overflow: hidden;
}

.media__item svg {
    display: block;
    height: 180px;
    width: 180px; /* QR всегда квадрат */
}

.media__item img {
    display: block;
    max-height: 180px;
    height: 180px;
    width: auto;   /* прямоугольные сохранят пропорции */
}