:root{--page-text: #17201b;--page-muted: #68736b;--eyebrow: #6d5c35;--page-bg: radial-gradient(circle at top, rgba(213, 186, 122, .22), transparent 32%), linear-gradient(180deg, #f9f2e5 0%, #f5f0e7 42%, #eef3ef 100%);--surface: rgba(255, 255, 255, .9);--surface-strong: #fbfaf7;--surface-border: #ded8c9;--field-border: #cfc7b6;--dashed-border: #9f947c;--accent: #247066;--accent-contrast: #ffffff;--pill-bg: #17201b;--pill-text: #ffffff;--shadow: 0 14px 30px rgba(109, 92, 53, .08);--landing-shadow: 0 24px 80px rgba(79, 60, 24, .12);--success-bg: #eef8f2;--success-border: #a8d0b1;--success-text: #1e5b3b;--error-bg: #fff1ef;--error-border: #efb3aa;--error-text: #8e2d22;color:var(--page-text);background:var(--page-bg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}:root[data-theme=dark]{--page-text: #edf4ef;--page-muted: #b9c7bd;--eyebrow: #d5c78a;--page-bg: linear-gradient(180deg, #102019 0%, #172a24 55%, #0d1714 100%);--surface: rgba(18, 31, 27, .92);--surface-strong: #1f342d;--surface-border: #2b433b;--field-border: #365148;--dashed-border: #567468;--accent: #75c3b4;--accent-contrast: #0d1714;--pill-bg: #edf4ef;--pill-text: #102019;--shadow: 0 14px 30px rgba(0, 0, 0, .28);--landing-shadow: 0 24px 80px rgba(0, 0, 0, .38)}:root[data-theme=teal]{--eyebrow: #14696f;--page-bg: radial-gradient(circle at top right, rgba(70, 191, 185, .24), transparent 28%), linear-gradient(180deg, #f0fbfa 0%, #dcf3f2 48%, #e7f7f5 100%);--surface: rgba(255, 255, 255, .92);--accent: #0f8a8d;--pill-bg: #0f8a8d}:root[data-theme=green]{--eyebrow: #3c6c3d;--page-bg: radial-gradient(circle at top left, rgba(150, 205, 130, .24), transparent 28%), linear-gradient(180deg, #f5faef 0%, #e4f0dc 48%, #edf5e7 100%);--accent: #4d8a45;--pill-bg: #28492b}:root[data-theme=retro]{--page-text: #3a2b1f;--page-muted: #73614d;--eyebrow: #a3542a;--page-bg: linear-gradient(180deg, #f8deb6 0%, #f3c89c 44%, #eed9c4 100%);--surface: rgba(255, 247, 232, .94);--surface-strong: #fff3df;--surface-border: #c99b6a;--field-border: #bb8d61;--dashed-border: #a36f41;--accent: #b45a33;--pill-bg: #5e321f;--shadow: 0 14px 30px rgba(115, 70, 34, .14);--landing-shadow: 0 24px 80px rgba(115, 70, 34, .2)}:root[data-theme=modern]{--page-text: #15161b;--page-muted: #60667a;--eyebrow: #4b5cc4;--page-bg: radial-gradient(circle at top right, rgba(120, 132, 255, .18), transparent 28%), linear-gradient(180deg, #f7f9ff 0%, #eef2ff 52%, #f8fbff 100%);--surface: rgba(255, 255, 255, .94);--surface-strong: #f6f8ff;--surface-border: #d6ddf5;--field-border: #c3cce7;--dashed-border: #91a1d6;--accent: #3e63dd;--pill-bg: #15161b}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}h1,h2,h3,p{margin-top:0}.landing-shell,.app-shell{min-height:100vh;padding:20px}.landing-shell{align-items:center;display:flex;justify-content:center}.landing-card{background:var(--surface);border:1px solid rgba(128,103,48,.18);border-radius:28px;box-shadow:var(--landing-shadow);max-width:720px;padding:32px;width:min(100%,720px)}.landing-card h1{font-size:clamp(2.2rem,8vw,4.6rem);line-height:.96;margin-bottom:16px}.landing-copy{color:var(--page-muted);font-size:1rem;line-height:1.6;margin-bottom:24px;max-width:34rem}.landing-actions{display:grid;gap:12px}.hero-action,.primary-action{align-items:center;background:var(--accent);border:0;border-radius:14px;color:var(--accent-contrast);cursor:pointer;display:inline-flex;font-weight:800;gap:8px;justify-content:center;min-height:50px;padding:12px 20px}.landing-note{color:var(--page-muted);font-size:.92rem;margin:0}.topbar{align-items:flex-start;display:flex;gap:20px;justify-content:space-between;margin:0 auto 24px;max-width:1180px}.session-actions{align-items:center;display:flex;gap:10px}.eyebrow{color:var(--eyebrow);font-size:.78rem;font-weight:700;letter-spacing:.08em;margin:0 0 8px;text-transform:uppercase}.topbar h1{font-size:clamp(2rem,6vw,3.8rem);line-height:1;margin-bottom:0}.auth-pill,.text-action{border-radius:999px;white-space:nowrap}.auth-pill{background:var(--pill-bg);color:var(--pill-text);padding:10px 16px}.text-action{background:transparent;border:1px solid var(--field-border);color:var(--page-text);cursor:pointer;min-height:40px;padding:0 14px}.icon-action{align-items:center;display:inline-flex;gap:8px}.workspace,.import-band,.collection,.status-banner{margin:0 auto;max-width:1180px}.status-banner{border-radius:16px;font-weight:700;margin-bottom:18px;padding:14px 18px}.status-banner.success{background:var(--success-bg);border:1px solid var(--success-border);color:var(--success-text)}.status-banner.error{background:var(--error-bg);border:1px solid var(--error-border);color:var(--error-text)}.panel,.pen-card,.empty-state{background:var(--surface);border:1px solid var(--surface-border);border-radius:18px;box-shadow:var(--shadow)}.import-actions{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,220px))}.import-input,.photo-input{align-items:center;background:var(--surface-strong);border:1px dashed var(--dashed-border);border-radius:14px;color:var(--page-text);cursor:pointer;display:flex;justify-content:center;min-height:46px;padding:9px 10px}.import-input input,.photo-input input{display:none}.import-message{color:var(--accent);font-weight:800;margin:12px 0 0}.workspace{align-items:start;display:grid;gap:18px;grid-template-columns:minmax(0,2fr) minmax(280px,1fr)}.panel{padding:20px}.compact{align-self:start}.panel-toggle{align-items:center;background:transparent;border:0;color:var(--page-text);cursor:pointer;display:flex;justify-content:space-between;padding:0;width:100%}.toggle-icon{transition:transform .18s ease}.toggle-icon.open{transform:rotate(180deg)}.collapsible-panel{display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;transition:grid-template-rows .22s ease,opacity .16s ease,visibility 0ms linear .22s;visibility:hidden}.collapsible-panel.open{grid-template-rows:1fr;opacity:1;transition:grid-template-rows .22s ease,opacity .16s ease;visibility:visible}.collapsible-panel-inner{min-height:0;overflow:hidden;padding-top:16px}.section-title,.collection-header,.search,.primary-action{align-items:center;display:flex}.section-title{gap:10px}.section-title svg{color:var(--accent)}.section-title h2,.collection h2{font-size:1.15rem;margin:0}.form-grid{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}label{color:var(--page-muted);display:grid;gap:7px;font-size:.88rem;font-weight:700}input,select{background:var(--surface-strong);border:1px solid var(--field-border);border-radius:14px;color:var(--page-text);min-height:46px;padding:9px 12px;width:100%}.preview{border-radius:16px;display:block;height:180px;margin-top:16px;object-fit:cover;width:100%}.primary-action{margin-top:16px;width:100%}.primary-action:disabled,.pagination button:disabled{cursor:not-allowed;opacity:.55}.collection{margin-top:24px}.collection-header{gap:12px;justify-content:space-between;margin-bottom:14px}.collection-title{align-items:center;display:flex;gap:16px}.collection-header p{color:var(--page-muted);margin:6px 0 0}.collection-tabs{background:var(--surface);border:1px solid var(--surface-border);border-radius:999px;display:flex;gap:4px;padding:4px}.collection-tabs button{background:transparent;border:0;border-radius:999px;color:var(--page-muted);cursor:pointer;font-weight:800;min-height:34px;padding:6px 14px}.collection-tabs button.active{background:var(--pill-bg);color:var(--pill-text)}.search{background:var(--surface);border:1px solid var(--surface-border);border-radius:16px;gap:8px;padding:0 10px;width:min(360px,100%)}.search input{background:transparent;border:0}.pen-grid,.ink-grid{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}.pen-card{cursor:pointer;overflow:hidden}.pen-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.ink-list-card{cursor:default}.photo-frame{align-items:center;aspect-ratio:4 / 3;background:color-mix(in srgb,var(--accent) 14%,var(--surface-strong));color:color-mix(in srgb,var(--page-text) 56%,transparent);display:flex;justify-content:center}.photo-frame img{height:100%;object-fit:cover;width:100%}.photo-frame svg{height:56px;width:56px}.pen-details{display:grid;gap:10px;padding:14px}.pen-details h3,.pen-details p{margin:0}.pen-details h3 strong{font-weight:800}.pen-details p{color:var(--page-muted)}.pagination{align-items:center;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:18px}.pagination button{background:var(--surface);border:1px solid var(--field-border);border-radius:12px;cursor:pointer;min-height:40px;padding:8px 14px}.empty-state{color:var(--page-muted);padding:32px 20px;text-align:center}.detail-eyebrow{margin-top:14px}.pen-detail-layout{display:grid;gap:18px;grid-template-columns:minmax(0,1.35fr) minmax(320px,1fr);margin:0 auto;max-width:1180px}.pen-detail-photo,.pen-detail-card{min-height:100%}.photo-stage{align-items:center;aspect-ratio:4 / 3;background:color-mix(in srgb,var(--accent) 14%,var(--surface-strong));border-radius:16px;color:color-mix(in srgb,var(--page-text) 56%,transparent);display:flex;justify-content:center;overflow:hidden}.photo-stage img{height:100%;object-fit:cover;width:100%}.photo-stage svg{height:88px;width:88px}.detail-grid{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr));margin:0}.detail-grid dt{color:var(--page-muted);font-size:.82rem;font-weight:700;margin-bottom:4px;text-transform:uppercase}.detail-grid dd{margin:0}.settings-overlay{align-items:flex-start;background:#0a0c0e6b;display:flex;top:0;right:0;bottom:0;left:0;justify-content:center;padding:min(8vh,72px) 16px 16px;position:fixed;z-index:20}.settings-panel{background:var(--surface);border:1px solid var(--surface-border);border-radius:22px;box-shadow:var(--landing-shadow);max-height:min(88vh,760px);max-width:760px;overflow:auto;padding:22px;width:100%}.settings-header{align-items:flex-start;display:flex;gap:16px;justify-content:space-between;margin-bottom:20px}.settings-header h2,.settings-section h3{margin-bottom:0}.settings-section+.settings-section{margin-top:22px}.settings-grid,.theme-grid{display:grid;gap:12px}.settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.theme-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.theme-option,.secondary-action{background:var(--surface-strong);border:1px solid var(--field-border);border-radius:14px;color:var(--page-text);cursor:pointer;min-height:48px;padding:12px 14px;text-transform:capitalize}.theme-option.active{background:color-mix(in srgb,var(--accent) 14%,var(--surface-strong));border-color:var(--accent);color:var(--page-text);font-weight:800}.ink-photo-actions{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}.ink-photo-action,.image-upload-status{text-align:center}.ink-photo-action input{display:none}.image-upload-status{background:var(--surface);border:1px solid var(--field-border);border-radius:12px;color:var(--page-muted);font-weight:800;min-height:40px;padding:10px 12px}@media (max-width: 960px){.workspace,.pen-grid,.ink-grid,.pen-detail-layout{grid-template-columns:1fr}.topbar,.collection-header,.session-actions{align-items:stretch;flex-direction:column}.session-actions{width:100%}.theme-grid,.settings-grid{grid-template-columns:1fr 1fr}}@media (max-width: 640px){.landing-shell,.app-shell{padding:14px}.landing-card,.panel{border-radius:20px;padding:18px}.form-grid,.import-actions,.ink-grid,.theme-grid,.settings-grid,.detail-grid{grid-template-columns:1fr}.search{width:100%}.pen-grid,.ink-grid{gap:10px}.pen-card{display:grid;grid-template-columns:96px minmax(0,1fr)}.photo-frame{aspect-ratio:1;min-height:100%}.photo-frame svg{height:38px;width:38px}.pen-details{gap:8px;padding:10px 12px}.pen-details h3{font-size:.98rem;line-height:1.25}.pen-details p,.pen-details label{font-size:.82rem}.pen-details select{min-height:38px;padding:7px 10px}.ink-photo-action{min-height:38px;padding:8px 10px}.pagination{justify-content:stretch}.pagination button,.text-action{width:100%}.settings-overlay{align-items:flex-end;padding:0}.settings-panel{border-bottom-left-radius:0;border-bottom-right-radius:0;max-height:92vh}}