:root { --ink:#18211e; --paper:#f6f4ee; --muted:#66706b; --navy:#0b2f4a; --blue:#087eb7; --cyan:#26c6da; --green:#087a4b; --mint:#e4f5eb; --purple:#7544c5; --violet:#f3ecff; --gold:#e9bb27; --line:#b9d0c7; }
* { box-sizing:border-box; }
body { background:linear-gradient(145deg,#f6f4ee 0 58%,#e8f5f1); color:var(--ink); font-family:Arial,Helvetica,sans-serif; margin:0; min-height:100vh; }
main { margin:auto; max-width:1080px; padding:52px 6% 76px; }
.eyebrow,.section-label { color:var(--blue); font:700 .75rem/1.4 ui-monospace,monospace; letter-spacing:.1em; margin:0 0 8px; }
.section-label { color:var(--green); }
h1,h2 { color:var(--navy); font-family:Georgia,serif; font-weight:500; }
h1 { font-size:clamp(3rem,8vw,5.7rem); letter-spacing:-.055em; line-height:.94; margin:10px 0 18px; }
h2 { font-size:clamp(1.55rem,3vw,2.2rem); margin:0; }
.intro { font:1.08rem/1.6 Georgia,serif; max-width:760px; }
.signin-card,.account-summary,.space-card,.library-card,.watch-card,.profile-card { background:#fffefa; border:1px solid var(--line); border-radius:14px; box-shadow:5px 5px 0 #0b2f4a10; margin-top:24px; padding:24px; }
.signin-card { border-top:5px solid var(--purple); max-width:680px; }
.signin-card p { line-height:1.5; }
.signin-card form { display:grid; gap:10px; }
.signin-card label { font-weight:700; }
.signin-card input { border:2px solid #7aa9bb; border-radius:8px; font:inherit; padding:13px; }
.signin-card .remember-choice { align-items:flex-start; background:#eef8ff; border:2px solid var(--blue); border-radius:10px; display:flex; font-weight:400; gap:11px; line-height:1.45; margin:4px 0; padding:12px; }
.signin-card .remember-choice input { accent-color:var(--purple); flex:0 0 auto; height:19px; margin:2px 0 0; padding:0; width:19px; }
.remember-choice strong { color:var(--navy); display:block; }
.signin-card button,.review-link,#sign-out,#delete-account,.setting-row button { border:2px solid var(--navy); border-radius:8px; cursor:pointer; font:700 .82rem/1.3 ui-monospace,monospace; letter-spacing:.04em; padding:12px 16px; text-decoration:none; }
.signin-card button,.review-link { background:var(--navy); color:#fff; }
.signin-card button:hover,.review-link:hover { background:var(--blue); }
#signin-status:not(:empty) { border-left:5px solid var(--blue); border-radius:8px; display:grid; gap:5px; margin:16px 0 0; padding:13px 16px; }
#signin-status strong { color:var(--navy); font-size:1rem; }
#signin-status span { line-height:1.45; }
#signin-status[data-state="pending"] { background:#e9f7fd; }
#signin-status[data-state="success"] { background:#e4f5eb; border-color:var(--green); }
#signin-status[data-state="error"] { background:#fff0e8; border-color:#a33328; }
#sign-out { background:transparent; color:var(--navy); }
.account-sections { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.account-sections a { background:#fffefa; border:1px solid var(--blue); border-radius:999px; color:var(--navy); font-weight:700; padding:9px 14px; text-decoration:none; }
.account-sections a:hover,.account-sections a:focus-visible { background:#e9f7fd; color:var(--blue); }
.account-summary,.space-heading,.library-heading { align-items:center; display:flex; gap:18px; justify-content:space-between; }
.account-summary { border-top:5px solid var(--blue); }
#account-email { font-family:Arial,sans-serif; font-size:1.15rem; font-weight:700; overflow-wrap:anywhere; }
.space-card { background:linear-gradient(135deg,#eaf8ee,#e9f7fd); border-top:5px solid var(--green); }
.space-heading strong { color:var(--navy); font-size:1.15rem; }
.space-track { background:#c5ddd5; border:1px solid #79a997; border-radius:999px; height:18px; margin:20px 0 12px; overflow:hidden; }
.space-track span { background:linear-gradient(90deg,var(--green),var(--cyan),var(--purple)); display:block; height:100%; transition:width .2s; width:0; }
.space-card p,.watch-card p { color:var(--muted); line-height:1.5; margin-bottom:0; }
.library-card { border-top:5px solid var(--purple); scroll-margin-top:20px; }
#library-list { display:grid; gap:10px; list-style:none; margin:18px 0 0; padding:0; }
#library-list li { align-items:center; background:var(--violet); border-left:5px solid var(--purple); display:flex; gap:14px; justify-content:space-between; padding:15px; }
.item-title { font-weight:700; overflow-wrap:anywhere; }
.item-meta { color:var(--muted); display:block; font-size:.85rem; margin-top:4px; }
.retention-status { border-radius:999px; display:inline-block; font:700 .72rem/1.3 ui-monospace,monospace; letter-spacing:.04em; margin-top:9px; padding:6px 9px; text-transform:uppercase; }
.retention-warning { background:#fff0b8; border:1px solid #b98700; color:#654900; }
.retention-recovery { background:#ffe1d7; border:1px solid #c55737; color:#7c2d1d; }
.retention-expired { background:#eee; border:1px solid #737b77; color:#4d5551; }
.retention-detail { color:var(--muted); display:block; font-size:.82rem; line-height:1.4; margin-top:6px; }
.open-item { background:#fff; border:1px solid var(--purple); border-radius:7px; color:#351565; font-weight:700; padding:9px 12px; text-decoration:none; white-space:nowrap; }
.unavailable-action { background:#eee; border-color:#9da9a4; color:#59625e; cursor:not-allowed; }
.restore-item { background:#b83478; border:1px solid #79204e; color:#fff; cursor:pointer; font:700 .82rem/1.3 ui-monospace,monospace; }
.restore-item:hover,.restore-item:focus-visible { background:#8d245d; outline:3px solid #ffd33d; outline-offset:2px; }
.watch-card { border-top:5px solid var(--gold); }
#watch-list { display:grid; gap:10px; list-style:none; margin:16px 0 0; padding:0; }
#watch-list li { align-items:center; background:#fff8dc; border-left:5px solid var(--gold); display:flex; flex-wrap:wrap; gap:8px 16px; padding:14px; }
#watch-list li>a { color:var(--navy); flex:1 1 240px; font-weight:700; overflow-wrap:anywhere; }
#watch-list .item-meta { flex:0 1 180px; margin:0; }
.remove-watch { background:#fff; border:1px solid #98720d; border-radius:7px; color:#604700; cursor:pointer; font-weight:700; padding:9px 11px; }
.remove-watch:hover { background:#ffe9a3; }
.remove-watch:focus-visible,#watch-list a:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
.remove-watch:disabled { cursor:wait; opacity:.55; }
.request-reevaluation { background:var(--navy); border:1px solid var(--navy); border-radius:7px; color:#fff; cursor:pointer; font-weight:700; padding:9px 11px; }
.request-reevaluation:hover,.request-reevaluation:focus-visible { background:var(--blue); outline:3px solid var(--gold); outline-offset:2px; }
.request-reevaluation:disabled { cursor:wait; opacity:.55; }
.reevaluation-pending { background:#f1e9ff; border-left:4px solid var(--purple); color:var(--navy); flex-basis:100%; font-weight:700; padding:9px 12px; }
.watch-notice { background:#e9f7fd; border-left:4px solid var(--blue); color:var(--navy); flex-basis:100%; font-weight:700; padding:9px 12px; }
.notice-choice { align-items:center; background:#e9f7fd; border:2px solid var(--blue); border-radius:8px; color:var(--navy); display:flex; flex:0 0 auto; font-weight:700; gap:10px; padding:10px 13px; }
.notice-choice input { accent-color:var(--blue); height:18px; width:18px; }
.profile-card { border-top:5px solid var(--blue); scroll-margin-top:20px; }
.profile-card>h2 { margin-bottom:10px; }
.setting-row { align-items:center; border-top:1px solid #c9d8d2; display:flex; gap:20px; justify-content:space-between; padding:18px 0; }
.setting-row h3 { color:var(--navy); font-size:1.05rem; margin:0 0 6px; }
.setting-row p { color:var(--muted); line-height:1.45; margin:0; max-width:680px; }
.setting-row button { background:#fff; color:var(--navy); min-width:170px; }
.setting-row button:disabled { border-color:#9da9a4; color:#66706b; cursor:not-allowed; }
.feature-status { background:#eef5f2; border:1px solid #9da9a4; border-radius:999px; color:#52605a; flex:0 0 auto; font:700 .74rem/1.3 ui-monospace,monospace; letter-spacing:.04em; padding:9px 13px; text-align:center; }
.danger-row { border-top-color:#d9a69a; }
.danger-row h3 { color:#8c3026; }
#delete-account { background:#8c3026; border-color:#6f241c; color:#fff; }
.delete-confirmation { background:#fff3ee; border:2px solid #a33328; border-radius:10px; margin-top:4px; padding:20px; }
.delete-confirmation h3 { color:#7c2119; font-size:1.2rem; margin:0 0 10px; }
.delete-confirmation p { color:#48231e; line-height:1.5; margin:0 0 16px; }
.delete-confirmation label { display:block; font-weight:700; margin-bottom:8px; }
.delete-confirmation input { background:#fff; border:2px solid #8c3026; border-radius:7px; font:inherit; max-width:320px; padding:11px; width:100%; }
.delete-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; }
.delete-actions button { border:2px solid var(--navy); border-radius:8px; cursor:pointer; font:700 .82rem/1.3 ui-monospace,monospace; padding:12px 16px; }
#cancel-delete { background:#fff; color:var(--navy); }
.delete-actions button:disabled { cursor:not-allowed; opacity:.6; }
#confirm-delete { background:#8c3026; border-color:#6f241c; color:#fff; }
#confirm-delete:disabled { background:#cfb1aa; border-color:#a9918b; color:#4f3b37; cursor:not-allowed; }
.delete-confirmation button:focus-visible,.delete-confirmation input:focus-visible,#delete-account:focus-visible { outline:3px solid #087eb7; outline-offset:3px; }
#profile-status { font-weight:700; line-height:1.45; }
@media(max-width:650px) {
  main { padding:40px 6% 60px; }
  .account-summary,.space-heading,.library-heading,#library-list li,.setting-row { align-items:flex-start; flex-direction:column; }
  .review-link,.open-item,.setting-row button { display:block; text-align:center; width:100%; }
  .feature-status { align-self:flex-start; }
  .delete-actions button { width:100%; }
}