: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: #f3ebd7;--page-muted: #a7b2bf;--eyebrow: #c8b07a;--page-bg: radial-gradient(circle at top, rgba(176, 190, 214, .06), transparent 30%), linear-gradient(180deg, #0b0f14 0%, #111820 48%, #0a0d12 100%);--surface: rgba(17, 24, 32, .92);--surface-strong: #18222d;--surface-border: #2a3947;--field-border: #344757;--dashed-border: #4c5f72;--accent: #d5c08f;--accent-contrast: #ffffff;--pill-bg: #d5c08f;--pill-text: #ffffff;--shadow: 0 14px 30px rgba(0, 0, 0, .38);--landing-shadow: 0 24px 80px rgba(0, 0, 0, .44);--success-bg: #13231c;--success-border: #2d5c4a;--success-text: #cce8d8;--error-bg: #2a1718;--error-border: #734446;--error-text: #ffd5d2}: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}.topbar-title{align-items:flex-start;display:grid;gap:10px;min-width:0}.header-logo{display:block;height:auto;max-width:min(420px,100%)}.session-actions{align-items:center;display:flex;gap:10px}.detail-back-action{margin:-12px auto 18px;max-width:1180px}.eyebrow{color:var(--eyebrow);font-size:.78rem;font-weight:700;letter-spacing:.08em;margin:0 0 8px;text-transform:uppercase}.sr-only{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.topbar h1{font-size:clamp(2rem,6vw,3.8rem);line-height:1;margin-bottom:0}.text-action{border-radius:999px;white-space:nowrap}.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%)}.collection-tools{align-items:center;display:flex;flex-wrap:nowrap;gap:10px;justify-content:flex-end;min-width:min(520px,100%)}.filter-check{align-items:center;background:var(--surface);border:1px solid var(--surface-border);border-radius:999px;display:flex;gap:8px;min-height:46px;padding:8px 14px;flex:0 0 auto;white-space:nowrap}.filter-check input{min-height:0;width:auto}.import-input.disabled{cursor:wait;opacity:.72}.import-progress{align-items:center;color:var(--page-muted);display:flex;font-size:.9rem;font-weight:800;gap:10px;margin-top:12px}.import-progress span{animation:spin .8s linear infinite;border:2px solid color-mix(in srgb,var(--accent) 22%,transparent);border-top-color:var(--accent);border-radius:999px;height:18px;width:18px}@keyframes spin{to{transform:rotate(360deg)}}.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}.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;position:relative}.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)}.ink-select-label{gap:0}.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;position:relative}.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}.photo-actions{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}.photo-action,.icon-only-action,.image-upload-status{text-align:center}.sign-out-action{margin-top:12px;width:100%}.photo-action input,.icon-only-action input{display:none}.icon-only-action{align-items:center;background:var(--surface-strong);border:1px solid var(--field-border);border-radius:12px;color:var(--page-text);cursor:pointer;display:inline-flex;height:40px;justify-content:center;padding:0;width:40px}.icon-only-action svg{height:20px;width:20px}.photo-frame-action,.photo-frame-actions,.photo-stage-actions,.photo-upload-status{bottom:10px;position:absolute;right:10px;z-index:1}.photo-frame-actions{width:min(168px,calc(100% - 20px))}.photo-stage-actions{width:min(220px,calc(100% - 20px))}.photo-upload-status{background:color-mix(in srgb,var(--surface) 88%,transparent);min-height:34px;padding:8px 10px}.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}.topbar{gap:14px}.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,.collection-tools{width:100%}.collection-tools .search{flex:1 1 auto;min-width:0}.header-logo{max-width:min(320px,100%)}.pen-grid,.ink-grid{gap:10px}.pen-card{display:grid;grid-template-columns:96px minmax(0,1fr)}.photo-frame{align-self:stretch;aspect-ratio:auto;height:auto;min-height:100%;overflow:hidden;width:96px}.photo-frame svg{height:38px;width:38px}.pen-details{min-width:0;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}.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}}