*{box-sizing:border-box;margin:0;padding:0}
body{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family: 'Montserrat', sans-serif;background:linear-gradient(135deg,#0f172a,#111827);color:#f9fafb;padding:20px;}
main {  flex: 1;display: flex;align-items: center;justify-content: center;}
.wrapper {flex: 1;display: flex; flex-direction:column; align-items: center;justify-content: center;width: 100%;padding: 20px;}
.card{width:100%;max-width:680px;background:rgba(17,24,39,.92);border:1px solid rgba(148,163,184,.2);border-radius:18px;padding:32px;box-shadow:0 20px 50px rgba(0,0,0,.35);text-align:center}
h1{font-size:32px;margin-bottom:16px}
p{color:#cbd5e1;line-height:1.6;margin-bottom:16px}
.btn-group{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:20px}
button,
input,
textarea,
select,
optgroup {
    font-family: Montserrat,sans-serif;
}
button{border:0;border-radius:12px;padding:14px 24px;font-size:17px;font-weight:bold;color:#0f172a;background:#38bdf8;cursor:pointer;transition:.2s}
button:hover{background:#0ea5e9;transform:translateY(-1px)}
button:disabled{opacity:.6;cursor:wait;transform:none}
button.secondary{background:#475569;color:#f1f5f9}
button.secondary:hover{background:#64748b}
.status{margin-top:18px;min-height:24px;color:#93c5fd}
.status.error{color:#fca5a5}
.result{margin-top:24px;text-align:left;border-top:1px solid rgba(148,163,184,.2);padding-top:20px}
/* Ряд с input и кнопками в одну строку */
.row.nowrap {display: flex;gap: 10px;flex-wrap: nowrap;align-items: stretch;margin-top: 10px;}
/* Input занимает всё доступное пространство */
.row.nowrap input {flex: 1;min-width: 0;padding: 12px 14px;font-size: 15px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}/* Кнопки в ряду имеют фиксированную ширину содержимого */
.row.nowrap button {flex-shrink: 0; white-space: nowrap;}
/* Кнопка удаления (красная) */
button.danger {background: #ef4444;color: #fff;}
button.danger:hover {background: #dc2626;}
input{flex:1;min-width:240px;padding:12px 14px;border-radius:10px;border:1px solid rgba(148,163,184,.3);background:#020617;color:#e2e8f0;outline:none}
.small{font-size:13px;color:#94a3b8;margin-top:12px}
a{color:#7dd3fc;word-break:break-all}
button svg {vertical-align: middle;}
/* Ряд с кнопками действий */
.row.actions {display: flex;gap: 10px;flex-wrap: nowrap;margin-top: 12px;}
/* Кнопка удаления (красная) */
button.danger {background: #ef4444;color: #fff;}
button.danger:hover {background: #dc2626;}
/* Полноэкранный оверлей для выделения */
#overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.95);z-index:9999;cursor:crosshair;touch-action:none}
#overlay.active{display:block}
#overlayCanvas{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:98vw;max-height:96vh;user-select:none}
#cropBox{position:absolute;border:2px solid #38bdf8;background:rgba(56,189,248,.2);pointer-events:none;display:none}
#overlayHint{position:absolute;top:16px;left:50%;transform:translateX(-50%);color:#94a3b8;font-size:15px;background:rgba(15,23,42,.9);padding:8px 20px;border-radius:20px;pointer-events:none;white-space:nowrap}
#overlayButtons{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;gap:12px}
#overlayButtons button{font-size:15px;padding:10px 20px}

.history-section {
    margin-top: 32px;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
    padding-top: 20px;
    text-align: left;
}

.history-section h3 {
    font-size: 18px;
    margin-bottom: 12px;
    color: var(--text-secondary);
}

.history-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 10px;
    background: rgba(30, 41, 59, 0.5);
    margin-bottom: 8px;
    transition: background 0.2s;
}

.history-item:hover {
    background: rgba(51, 65, 85, 0.7);
}

.history-item img {
    width: 80px;
    height: 50px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.history-item .info {
    flex: 1;
    min-width: 0;
}

.history-item .info a {
    display: block;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-item .info .time {
    font-size: 12px;
    color: var(--text-muted);
}

.history-item .delete-history {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
}

.history-item .delete-history:hover {
    background: rgba(239, 68, 68, 0.15);
}

.footer{
    margin-top:auto;
    padding:20px;
    text-align:center;
    color:#64748b;
    font-size:14px;
    line-height:1.8;
    width:100%;
}
.footer a{color:#94a3b8;text-decoration:none}
.footer a:hover{color:#cbd5e1;text-decoration:underline}
.footer-sub{font-size:12px;color:#475569}