:root { color-scheme: light; --ink:#26352f; --muted:#718078; --paper:#fffdf8; --cream:#f5efe2; --green:#44735d; --green-dark:#315744; --line:#ddd7c9; --danger:#a74d47; }
* { box-sizing:border-box; }
html { min-height:100%; background:var(--cream); }
body { margin:0; min-height:100vh; color:var(--ink); font-family:Inter,ui-rounded,"Segoe UI",system-ui,sans-serif; background:radial-gradient(circle at 10% 0%,#fff9e9 0,transparent 35%),linear-gradient(145deg,#f8f2e6,#e7efe8); }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
.login-page { display:grid; place-items:center; padding:24px; }
.login-card { width:min(100%,420px); padding:40px; border:1px solid rgba(90,84,65,.12); border-radius:28px; background:rgba(255,253,248,.92); box-shadow:0 24px 80px rgba(54,65,58,.14); }
.brand-mark { display:grid; place-items:center; width:52px; height:52px; border-radius:17px; color:white; background:var(--green); font-size:27px; transform:rotate(-4deg); }
h1,h2,p { margin-top:0; }
.login-card h1 { margin:20px 0 6px; font-size:2.2rem; letter-spacing:-.04em; }
.login-card > p { color:var(--muted); }
label { display:block; margin:28px 0 8px; font-weight:700; }
input { width:100%; padding:14px 16px; border:1px solid var(--line); border-radius:13px; background:white; outline:none; }
input:focus,textarea:focus { border-color:var(--green); box-shadow:0 0 0 4px rgba(68,115,93,.12); }
.login-card button,.editor-footer button,.history-row button { border:0; border-radius:13px; padding:13px 18px; color:white; background:var(--green); font-weight:750; }
.login-card button { width:100%; margin-top:14px; }
button:hover { filter:brightness(.96); }
.form-error { margin:10px 0 0; color:var(--danger); }
.topbar { display:flex; align-items:center; justify-content:space-between; width:min(100% - 32px,900px); margin:auto; padding:28px 0 20px; }
.topbar h1 { margin:1px 0 0; font-size:1.7rem; letter-spacing:-.03em; }
.eyebrow { color:var(--green); font-size:.72rem; font-weight:850; letter-spacing:.16em; text-transform:uppercase; }
.icon-button { display:grid; place-items:center; width:45px; height:45px; padding:0; border:1px solid var(--line); border-radius:14px; background:rgba(255,253,248,.8); color:var(--ink); font-size:1.5rem; }
.header-actions { display:flex; gap:8px; }
.workspace { width:min(100% - 32px,900px); margin:auto; padding-bottom:32px; }
.tabs { display:flex; gap:10px; margin-bottom:14px; overflow-x:auto; padding:2px 2px 6px; scrollbar-width:thin; }
.tab { padding:15px; border:1px solid var(--line); border-radius:16px; background:rgba(255,253,248,.65); color:var(--muted); font-weight:800; }
.tab { flex:1 0 max-content; min-width:130px; }
.tab span { margin-right:6px; }
.tab.active { border-color:var(--green); color:white; background:var(--green); box-shadow:0 8px 22px rgba(49,87,68,.18); }
.editor-card { overflow:hidden; border:1px solid rgba(90,84,65,.14); border-radius:24px; background:var(--paper); box-shadow:0 20px 65px rgba(54,65,58,.11); }
.editor-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:23px 24px 17px; }
.editor-heading p { margin:0 0 3px; color:var(--muted); font-size:.82rem; }
.editor-heading h2 { margin:0; font-size:1.45rem; }
.save-status { color:var(--muted); font-size:.78rem; white-space:nowrap; }
.save-status.saved { color:var(--green); }
.save-status.error { color:var(--danger); }
textarea { display:block; width:calc(100% - 32px); min-height:56vh; margin:0 16px; padding:20px; resize:vertical; border:1px solid var(--line); border-radius:17px; outline:none; background:#fff; color:var(--ink); font-family:inherit; font-size:1.08rem; line-height:1.62; }
.editor-footer { display:flex; align-items:center; justify-content:space-between; padding:14px 20px 18px; color:var(--muted); font-size:.78rem; }
.editor-footer button { padding:10px 15px; }
dialog { width:min(92vw,680px); max-height:82vh; padding:24px; border:0; border-radius:24px; color:var(--ink); background:var(--paper); box-shadow:0 28px 90px rgba(20,30,25,.28); }
dialog::backdrop { background:rgba(28,38,33,.48); backdrop-filter:blur(3px); }
.dialog-heading { display:flex; justify-content:space-between; align-items:start; }
.dialog-heading h2 { margin:4px 0 0; }
.dialog-help { color:var(--muted); }
.history-list { display:grid; gap:10px; overflow:auto; }
.history-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px; border:1px solid var(--line); border-radius:15px; }
.history-row strong { font-size:.82rem; }
.history-row p { max-width:45ch; margin:4px 0 0; overflow:hidden; color:var(--muted); font-size:.78rem; white-space:nowrap; text-overflow:ellipsis; }
.history-row button { flex:none; padding:9px 12px; font-size:.78rem; }
.create-list-form { display:grid; grid-template-columns:72px 1fr auto; gap:10px; align-items:end; margin:20px 0; padding:16px; border-radius:17px; background:var(--cream); }
.create-list-form label { margin:0 0 5px; font-size:.72rem; }
.create-list-form input { padding:11px; }
.create-list-form button,.manage-actions button { min-height:42px; border:0; border-radius:12px; padding:0 14px; color:white; background:var(--green); font-weight:750; }
.manage-list { display:grid; gap:9px; }
.manage-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px; border:1px solid var(--line); border-radius:15px; }
.manage-identity { display:grid; grid-template-columns:58px minmax(100px,1fr); gap:8px; flex:1; }
.manage-identity input { padding:10px; }
.manage-actions { display:flex; gap:7px; }
.manage-actions .danger-button { color:var(--danger); background:#f7e8e5; }
.trash-section { margin-top:26px; padding-top:18px; border-top:1px solid var(--line); }
.trash-section h3 { margin:0 0 10px; font-size:1rem; }
.empty-note { margin:0; color:var(--muted); font-size:.85rem; }
.toast { position:fixed; left:50%; bottom:24px; z-index:20; max-width:calc(100% - 32px); padding:12px 18px; border-radius:13px; opacity:0; transform:translate(-50%,12px); pointer-events:none; color:white; background:var(--ink); transition:.2s ease; }
.toast.visible { opacity:1; transform:translate(-50%,0); }
@media (max-width:600px) { .topbar { padding-top:max(20px,env(safe-area-inset-top)); } .workspace,.topbar { width:min(100% - 20px,900px); } .editor-heading { padding:18px 18px 14px; } textarea { min-height:58vh; padding:16px; } .editor-footer span { display:none; } .editor-footer { justify-content:flex-end; } .login-card { padding:28px; } dialog { padding:18px; } .create-list-form { grid-template-columns:65px 1fr; } .create-list-form button { grid-column:1 / -1; } .manage-row { align-items:stretch; flex-direction:column; } .manage-actions button { flex:1; } }