:root { color-scheme: light; --blue:#1767b4; --navy:#12243e; --ink:#182337; --muted:#667085; --line:#dfe5ed; --surface:#fff; --soft:#f4f7fb; --danger:#b42318; --shadow:0 18px 55px rgba(31,55,88,.13); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:linear-gradient(145deg,#edf5fc 0,#f9fbfd 42%,#eef8f5 100%); }
button,input,select,textarea { font:inherit; }
button { border:0; border-radius:13px; padding:12px 18px; font-weight:750; color:#fff; background:var(--blue); cursor:pointer; }
button:disabled { opacity:.55; cursor:wait; }
.secondary { color:var(--blue); background:#eaf3fc; }
.archive-header { position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px max(20px,calc((100% - 1180px)/2)); border-bottom:1px solid rgba(20,48,80,.08); background:rgba(255,255,255,.9); backdrop-filter:blur(18px); }
.brand { display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none; }
.brand img { width:54px; height:44px; object-fit:contain; }
.brand span { display:grid; min-width:0; }
.brand strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.brand small { color:var(--muted); }
.back-link { color:var(--blue); font-weight:750; text-decoration:none; }
.archive-shell { width:min(1180px,calc(100% - 32px)); margin:36px auto 70px; }
.hero { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:20px; }
.hero h1,.login-card h1 { margin:4px 0 8px; font-size:clamp(2rem,5vw,3.4rem); line-height:1; letter-spacing:-.045em; }
.hero p,.login-card p { max-width:700px; margin:0; color:var(--muted); line-height:1.55; }
.eyebrow { color:var(--blue); font-size:.72rem; font-weight:850; letter-spacing:.14em; text-transform:uppercase; }
code { padding:2px 6px; border-radius:6px; color:#38516c; background:#e9eef4; }
.notice { display:flex; gap:12px; padding:16px 18px; margin:22px 0; border:1px solid #f4d7a8; border-radius:16px; color:#714d16; background:#fff8e9; }
.notice span { color:#86642d; }
.toolbar { display:grid; grid-template-columns:minmax(220px,320px) minmax(260px,1fr) 48px; gap:12px; padding:16px; border:1px solid rgba(27,60,95,.08); border-radius:20px; background:rgba(255,255,255,.82); box-shadow:0 10px 35px rgba(45,73,104,.07); }
.toolbar label { display:grid; gap:6px; }
.toolbar label span,.edit-field > span,.login-card label { color:var(--muted); font-size:.78rem; font-weight:750; }
input,select,textarea { width:100%; padding:12px 13px; border:1px solid var(--line); border-radius:12px; color:var(--ink); background:#fff; outline:none; }
input:focus,select:focus,textarea:focus { border-color:#7cb2e3; box-shadow:0 0 0 4px rgba(23,103,180,.1); }
textarea { min-height:92px; resize:vertical; line-height:1.45; }
.icon-button { align-self:end; width:48px; height:46px; padding:0; font-size:1.5rem; }
.result-head { display:flex; justify-content:space-between; align-items:center; padding:24px 4px 12px; }
.result-head strong { font-size:1.18rem; }
.result-head span { color:var(--muted); }
.record-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:14px; }
.record-card { display:grid; gap:13px; padding:18px; border:1px solid rgba(27,60,95,.09); border-radius:18px; background:var(--surface); box-shadow:0 9px 25px rgba(45,73,104,.06); }
.record-card-head { display:flex; justify-content:space-between; gap:12px; }
.record-card h3 { margin:0 0 4px; font-size:1rem; overflow-wrap:anywhere; }
.record-card p { display:-webkit-box; margin:0; overflow:hidden; color:var(--muted); font-size:.88rem; line-height:1.4; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.record-meta { display:flex; flex-wrap:wrap; gap:7px; }
.record-meta span { padding:5px 8px; border-radius:999px; color:#506174; background:var(--soft); font-size:.74rem; }
.record-actions { display:flex; gap:8px; margin-top:auto; }
.record-actions button { flex:1; padding:9px 12px; }
.record-actions .delete { flex:0 0 auto; color:var(--danger); background:#fff0ef; }
.empty { grid-column:1/-1; padding:50px 20px; border:1px dashed #cbd5e1; border-radius:20px; color:var(--muted); text-align:center; background:rgba(255,255,255,.55); }
.login-card { width:min(460px,100%); margin:10vh auto; padding:30px; border-radius:24px; background:#fff; box-shadow:var(--shadow); }
.login-card form { display:grid; gap:10px; margin-top:24px; }
.error { min-height:20px; margin:6px 0 0; color:var(--danger); font-size:.86rem; }
dialog { width:min(760px,calc(100% - 24px)); max-height:88vh; padding:0; overflow:auto; border:0; border-radius:24px; color:var(--ink); box-shadow:var(--shadow); }
dialog::backdrop { background:rgba(8,24,43,.55); backdrop-filter:blur(4px); }
dialog form,#backupDialog { padding:24px; }
.dialog-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:20px; }
.dialog-head h2 { margin:3px 0 0; font-size:1.55rem; }
.close { width:38px; height:38px; padding:0; color:#596779; background:#f0f3f6; font-size:1.5rem; }
.edit-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.edit-field { display:grid; gap:6px; }
.edit-field.wide { grid-column:1/-1; }
.check-field { display:flex; align-items:center; gap:10px; min-height:48px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; }
.check-field input { width:20px; height:20px; }
.readonly { color:#6a7685; background:#f0f3f6; }
.dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:22px; }
.dialog-copy { margin:-8px 0 18px; color:var(--muted); line-height:1.5; }
.backup-list { display:grid; gap:9px; }
.backup-row { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:13px; border:1px solid var(--line); border-radius:14px; }
.backup-row span { display:grid; gap:3px; }
.backup-row small { color:var(--muted); }
.backup-row button { padding:8px 11px; }
.toast { position:fixed; right:22px; bottom:22px; z-index:100; max-width:360px; padding:13px 17px; border-radius:14px; color:#fff; background:var(--navy); box-shadow:var(--shadow); opacity:0; transform:translateY(12px); pointer-events:none; transition:.2s ease; }
.toast.show { opacity:1; transform:none; }
@media (max-width:700px) { .archive-header { padding:9px 14px; } .brand { min-width:0; } .brand img { width:45px; } .brand strong { max-width:52vw; } .brand small { display:none; } .back-link { font-size:.84rem; } .archive-shell { width:min(100% - 22px,1180px); margin-top:24px; } .hero { display:grid; } .hero .secondary { width:100%; } .notice { display:grid; } .toolbar { grid-template-columns:1fr 48px; } .toolbar > label:first-child { grid-column:1/-1; } .edit-fields { grid-template-columns:1fr; } .edit-field.wide { grid-column:auto; } dialog form,#backupDialog { padding:18px; } .backup-row { align-items:flex-start; } }