/* /public/assets/app.css */
:root{
    --bg:#0b0b10; --text:#eaeaf0; --muted:#9aa0a6; --card:#141420;
    --accent:#ff3ea5; --accent2:#ff77c8;
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{
    margin:0; min-height:100vh; min-height:100svh; min-height:100dvh;
    background:
            radial-gradient(1200px 800px at 80% 10%, rgba(255,62,165,.15), transparent 60%),
            radial-gradient(900px 600px at 10% 90%, rgba(255,119,200,.12), transparent 60%),
            var(--bg);
    color:var(--text);
    font:16px/1.45 system-ui, Segoe UI, Roboto, Arial, sans-serif;
}
html, body { overflow-x: hidden; }

.container{max-width:880px;margin:40px auto;padding:24px}
.card{
    background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 10px 30px rgba(0,0,0,.45);
    border-radius:18px; padding:28px;
}

/* Header */
.hdr{display:flex;gap:14px;align-items:center;margin-bottom:18px}
.logo{width:36px;height:36px;border-radius:10px;display:block;box-shadow:0 4px 16px rgba(255,62,165,.45)}
.title{font-weight:700;font-size:20px}
.lang{margin-left:auto;display:flex;gap:8px;align-items:center;color:var(--muted)}
.lang button{background:#181826;border:1px solid rgba(255,255,255,.1);color:var(--text);padding:6px 10px;border-radius:8px;cursor:pointer}
.lang button:hover{border-color:rgba(255,62,165,.45)}

/* Form */
form{display:grid;gap:16px}
label{font-size:13px;color:var(--muted)}
input{width:100%;border-radius:12px;border:1px solid rgba(255,255,255,.1);padding:12px 14px;background:#0f0f16;color:var(--text)}
input:focus{outline:2px solid transparent;border-color:rgba(255,62,165,.45);box-shadow:0 0 0 3px rgba(255,62,165,.15)}
/* светлые нативные индикаторы */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input::-webkit-clear-button,input::-webkit-inner-spin-button{filter:invert(1) brightness(1.2);opacity:.9}

.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:600px){ .row{grid-template-columns:1fr} }

button{cursor:pointer;border:none;border-radius:12px;padding:12px 14px;font-weight:600}
button[type="submit"]{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;width:auto}

.help{color:var(--muted);font-size:13px}
.help code, .toast a { word-break: break-all; } /* длинные строки не ломают сетку */
.toast{margin-top:14px;padding:12px 14px;background:rgba(0,160,100,.12);border:1px solid rgba(0,200,120,.25);border-radius:12px}
.toast.error{background:rgba(200,0,60,.12);border-color:rgba(255,60,120,.35)}

/* Collapsible "Параметры" */
.adv{border:1px solid rgba(255,255,255,.08);border-radius:12px;background:#0f0f16}
.adv > summary{
    list-style:none; display:flex; align-items:center; gap:8px;
    padding:10px 12px; cursor:pointer; user-select:none;
    color:var(--text);
}
.adv > summary::-webkit-details-marker{display:none}
.adv > summary svg{transition:transform .2s ease; color:var(--text)}
.adv[open] > summary svg{transform:rotate(180deg)}
.adv .panel{padding:12px; border-top:1px solid rgba(255,255,255,.08)}

/* Result */
.qr{display:none}
.qr.show{display:block}
.qr-card{
    margin-top:12px;
    display:flex; gap:16px; align-items:flex-start; /* как ты хотел */
    background:#0f0f16; border:1px solid rgba(255,255,255,.08);
    border-radius:16px; padding:16px;
}
.qr-card img{width:220px;height:220px;border-radius:12px;background:#fff}
.qr-card .meta{flex:1; display:flex; flex-direction:column; gap:10px; min-width:0}
.copy{display:flex; gap:8px; align-items:center}
.copy input{
    flex:1; min-width:0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
#short{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.actions{display:flex; gap:10px; flex-wrap:wrap}
.btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 12px; border-radius:12px;
    background:#181826; color:var(--text);
    border:1px solid rgba(255,255,255,.12); text-decoration:none;
}
.btn:hover{border-color:rgba(255,62,165,.45)}
.btn.ghost{background:transparent}

/* Icons visible on dark */
.btn svg, .btn path, .icon-left svg, .icon-left path { fill: currentColor; stroke: currentColor; }
.btn.icon{width:40px;height:40px;padding:0;justify-content:center}
svg{color:var(--text)} svg path{fill:currentColor}

/* Mobile tweaks incl. iPhone 14 Pro Max (430px) */
@media (max-width:480px){
    .container{padding:12px;margin:20px auto}
    .card{padding:16px;border-radius:14px}
    .hdr{gap:10px}
    .logo{width:28px;height:28px}
    .title{font-size:18px}
    .row{grid-template-columns:1fr;gap:10px}
    .qr-card{flex-direction:column;align-items:stretch;gap:12px}
    .qr-card img{width:min(70vw,240px);height:auto;align-self:center}
    .btn{justify-content:center}
    .btn.icon{width:36px;height:36px}
    .actions{flex-direction:column;align-items:stretch;gap:8px}
}
@media (max-width:600px){
    .row{grid-template-columns:1fr}
    .qr-card{gap:14px}
    .qr-card img{width:min(55vw,220px)}
}