:root { --ink:#0b4269; --deep:#075a96; --sky:#58bce9; --ice:#e9f9ff; --glass:rgba(232,249,255,.42); --line:rgba(255,255,255,.62); --muted:#43728d; --ease:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(.22,1,.36,1); font-family: ui-rounded, "SF Pro Rounded", "Avenir Next", Avenir, system-ui, sans-serif; color:var(--ink); }
* { box-sizing:border-box; } html { -webkit-text-size-adjust:100%; } body { min-width:320px; min-height:100vh; min-height:100dvh; margin:0; background:linear-gradient(154deg,#effdff 0%,#cdf3ff 35%,#83cce9 75%,#4998ca 100%); overflow-x:hidden; padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); } button,input,textarea,select { font:inherit; } button { cursor:pointer; -webkit-tap-highlight-color:transparent; } button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:3px solid rgba(18,151,220,.36); outline-offset:2px; } .hidden { display:none !important; }
.atmosphere { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:-1; background:radial-gradient(ellipse at 82% 8%,rgba(255,255,255,.9),transparent 22%),radial-gradient(ellipse at 12% 78%,rgba(219,252,255,.75),transparent 28%); } .atmosphere::before,.atmosphere::after,.atmosphere i,.atmosphere b,.atmosphere em { content:""; position:absolute; display:block; border-radius:50%; filter:blur(18px); opacity:.55; } .atmosphere::before { width:75vw;height:38vw;left:-17vw;top:5vh;background:linear-gradient(150deg,rgba(18,117,191,.8),rgba(96,215,237,.18)); transform:rotate(-22deg); animation:drift 24s ease-in-out infinite alternate; } .atmosphere::after { width:50vw;height:54vw;right:-19vw;bottom:3vh;background:radial-gradient(circle,rgba(226,255,255,.88),rgba(65,177,222,.1) 67%); animation:float 31s ease-in-out infinite alternate; } .atmosphere i { width:58vw;height:17vw;top:45vh;left:24vw;background:rgba(210,255,254,.39); transform:rotate(-11deg); animation:wave 20s ease-in-out infinite alternate; } .atmosphere b { width:34vw;height:34vw;top:-11vh;right:20vw;background:rgba(58,168,221,.27); } .atmosphere em { width:20vw;height:20vw;bottom:4vh;left:20vw;background:rgba(255,255,255,.42); }
@keyframes drift { to { transform:translate(8vw,3vh) rotate(-16deg); } } @keyframes float { to { transform:translate(-7vw,-6vh) scale(1.08); } } @keyframes wave { to { transform:translate(-12vw,6vh) rotate(-5deg); } }
.app-shell { width:min(1280px,calc(100% - 48px)); margin:0 auto; } .glass-panel { border:1px solid var(--line); background:linear-gradient(145deg,rgba(255,255,255,.58),rgba(209,244,255,.22)); box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 18px 44px rgba(9,91,147,.14); backdrop-filter:blur(16px); }
.auth-view { min-height:100vh; display:grid; place-items:center; padding:38px 0; position:relative; } .auth-panel { width:min(490px,100%); padding:44px 48px 35px; border-radius:34px 34px 44px 44px; position:relative; overflow:hidden; } .auth-panel::after { content:""; position:absolute; left:-8%;right:-8%;height:47px;top:0;border-radius:50%;background:linear-gradient(to bottom,rgba(255,255,255,.58),transparent); pointer-events:none; } .auth-panel-top { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:36px; position:relative; z-index:1; } .auth-panel-top .wordmark { margin-bottom:0; flex:1; min-width:0; } .visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .lang-switch { display:inline-flex; align-items:center; gap:4px; padding:3px; border-radius:999px; border:1px solid rgba(61,157,201,.28); background:rgba(255,255,255,.42); box-shadow:inset 0 1px 0 rgba(255,255,255,.7); flex-shrink:0; } .lang-button { border:0; border-radius:999px; padding:5px 10px; min-width:36px; font-size:.72rem; font-weight:800; letter-spacing:.04em; color:#357a9a; background:transparent; transition:background .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease); } .lang-button:hover { color:#075986; } .lang-button.is-active { color:white; background:linear-gradient(to bottom,#7dd8f3,#1596d1); box-shadow:inset 0 1px 1px rgba(255,255,255,.6),0 2px 6px rgba(16,118,169,.22); } .profile .lang-switch { flex-shrink:0; } .wordmark { display:flex; align-items:center; gap:12px; position:relative; z-index:1; margin-bottom:36px; } .wordmark-bubble { display:grid; place-items:center; width:49px;height:39px;border-radius:50%;font-weight:800;letter-spacing:-.09em;color:white;background:linear-gradient(165deg,#d7fcff 4%,#35b9e6 45%,#0876b5 100%); box-shadow:inset 0 2px 2px rgba(255,255,255,.85),0 4px 9px rgba(0,89,163,.25); } .wordmark small { letter-spacing:.08em;font-size:.78rem;font-weight:700;color:#317098; } .auth-copy { margin:43px 0 28px; } .eyebrow { margin:0 0 8px; color:#247eac; font-size:.68rem;line-height:1;letter-spacing:.16em;text-transform:uppercase;font-weight:800; } h1,h2,p { margin-top:0; } h1 { margin-bottom:14px;font-size:clamp(2.1rem,7vw,3.35rem);line-height:.98;letter-spacing:-.065em;font-weight:750;color:#075887; } .auth-copy>p:last-child { max-width:360px;margin:0;color:#3c7290;line-height:1.55;font-size:.94rem; } label { display:flex;flex-direction:column;gap:7px;font-size:.77rem;font-weight:700;color:#246687;letter-spacing:.02em; } input,textarea,select { width:100%;border:1px solid rgba(61,157,201,.3);border-radius:13px;background:rgba(255,255,255,.57);color:#0c517d;padding:11px 13px;box-shadow:inset 0 1px 3px rgba(9,105,153,.08); transition:border-color .25s var(--ease),box-shadow .25s var(--ease); }
input:focus,textarea:focus,select:focus { border-color:rgba(18,151,220,.42); box-shadow:inset 0 1px 3px rgba(9,105,153,.08),0 0 0 3px rgba(18,151,220,.1); } textarea { resize:vertical; } .auth-form { display:grid;gap:15px; } .aqua-button { border:1px solid rgba(1,109,175,.35);border-radius:999px;padding:11px 17px;color:white;font-weight:750;background:linear-gradient(to bottom,#a1ecff 0%,#42bce8 41%,#117fb9 100%);box-shadow:inset 0 1px 1px rgba(255,255,255,.84),inset 0 -1px 2px rgba(2,76,127,.33),0 5px 11px rgba(16,118,169,.25);transition:transform .28s var(--ease),filter .28s var(--ease),box-shadow .28s var(--ease); } .aqua-button:hover { transform:translateY(-1px);filter:brightness(1.03); box-shadow:inset 0 1px 1px rgba(255,255,255,.84),inset 0 -1px 2px rgba(2,76,127,.33),0 7px 14px rgba(16,118,169,.2); } .aqua-button:active { transform:translateY(0); } .aqua-button span { margin-left:6px; } .form-switch { margin:2px 0 0;text-align:center;color:#4d7d96;font-size:.81rem; } .text-button { border:0;background:transparent;color:#157eae;padding:3px;font-weight:750; transition:color .2s var(--ease),opacity .2s var(--ease); } .text-button:hover { color:#075b91; } .form-message { min-height:1.25em;margin:12px 0 0;font-size:.82rem;color:#a23f58;font-weight:650; } .auth-orb { position:absolute;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle at 37% 27%,#f6ffff,#93e7f5 30%,#1596d1 73%);box-shadow:inset -13px -13px 22px rgba(0,93,167,.26),inset 7px 7px 14px white;transform:translate(260px,-235px); }
.shelf-view { padding:35px 0 84px; } .topline { display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-bottom:28px;color:#075785; } .quiet-logo { text-decoration:none;color:#075887;font-weight:900;letter-spacing:-.11em;font-size:1.6rem; } .stats { margin:0;font-size:.8rem;font-weight:700;letter-spacing:.03em;color:#367394; } .profile { justify-self:end;display:flex;gap:16px;align-items:center;font-size:.84rem;color:#226c90;font-weight:700; } .shelf-toolbar { display:flex;justify-content:center;margin:-8px 0 34px; } .recommendations-button { border:1px solid rgba(255,255,255,.62);border-radius:999px;padding:10px 18px;background:linear-gradient(145deg,rgba(255,255,255,.58),rgba(209,244,255,.24));color:#075986;font-weight:750;box-shadow:0 8px 18px rgba(9,91,147,.12);transition:transform .28s var(--ease),box-shadow .28s var(--ease),background .28s var(--ease); } .recommendations-button:hover { transform:translateY(-1px);background:rgba(255,255,255,.72);box-shadow:0 10px 20px rgba(9,91,147,.16); } .recommendations-count { display:inline-grid;place-items:center;min-width:1.35rem;height:1.35rem;margin-left:8px;padding:0 5px;border-radius:999px;background:#117fb9;color:white;font-size:.68rem;font-weight:800;line-height:1; } .recommendations-count.hidden { display:none; } .recommendations-panel { width:min(760px,100%); } .recommendations-content { display:grid;gap:24px;max-height:min(560px,calc(100vh - 180px));overflow:auto;padding-right:4px; } .recommendations-empty { margin:0;color:#3e7897;font-size:.88rem;line-height:1.5; } .recommendations-group h3 { margin:0 0 12px;color:#075e91;font-size:.84rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase; } .recommendations-list { display:grid;gap:10px; } .recommendation-entry { display:grid;grid-template-columns:58px 1fr;gap:12px;align-items:center;padding:10px 12px;border:1px solid rgba(255,255,255,.62);border-radius:13px;background:rgba(255,255,255,.42);text-align:left;color:inherit;box-shadow:0 4px 14px rgba(9,91,147,.08);transition:transform .24s var(--ease),background .24s var(--ease); } .recommendation-entry:hover { transform:translateY(-1px);background:rgba(255,255,255,.68); } .recommendation-entry img,.recommendation-entry .fallback-cover { width:58px;height:86px;border-radius:7px;object-fit:cover; } .recommendation-entry.square img,.recommendation-entry.square .fallback-cover { height:58px; } .recommendation-copy strong { display:block;font-size:.92rem;color:#075b86;line-height:1.2; } .recommendation-copy span { display:block;margin-top:4px;font-size:.76rem;color:#397795; } .recommendation-copy p { margin:8px 0 0;font-size:.76rem;line-height:1.4;color:#12648a;font-weight:600; } .recommend-field { margin-top:2px; } .checkbox-line { display:flex;align-items:center;gap:10px;font-size:.84rem;font-weight:700;color:#246687; } .checkbox-line input { width:auto;accent-color:#117fb9; }
.shelf-options { margin-top:10px; padding:16px 18px;border:1px solid rgba(255,255,255,.62);border-radius:16px;background:linear-gradient(145deg,rgba(255,255,255,.52),rgba(209,244,255,.2)); box-shadow:0 8px 18px rgba(9,91,147,.1); }
.shelf-option { margin:0; cursor:pointer; }
.shelf-option .checkbox-line { font-size:.82rem; line-height:1.45; } .recommend-badge { position:absolute;left:7px;top:7px;z-index:2;width:22px;height:22px;border-radius:999px;display:grid;place-items:center;background:rgba(17,127,185,.92);color:white;font-size:.72rem;font-weight:800;box-shadow:0 2px 8px rgba(4,70,121,.24); } .recommend-tag { color:#117fb9; }
.shelves { display:grid;gap:46px; } .shelf-section { min-width:0; } .shelf-heading { display:flex;align-items:end;justify-content:space-between;margin:0 10px 11px; } .shelf-label { margin:0;color:#075e91;font-size:.82rem; } .shelf-count { margin:6px 0 0;color:#4a7f9b;font-size:.76rem;font-weight:650; } .shelf-search-toggle { font-size:.78rem; } .local-search { display:flex;margin:0 10px 12px;width:min(310px,calc(100% - 20px)); } .local-search input { padding:8px 11px;border-radius:10px;font-size:.82rem;width:100%; } .local-search input::-webkit-search-cancel-button { display:none; } .empty-state { margin:4px 10px 13px;color:#3e7897;font-size:.85rem; } .shelf-window { min-height:245px;position:relative;padding:4px 14px 23px;overflow-x:auto;overflow-y:visible;scrollbar-width:thin;scrollbar-color:rgba(18,137,193,.28) transparent;cursor:grab; } .shelf-window.is-dragging { cursor:grabbing;user-select:none; } .shelf-window.is-dragging .media-card { pointer-events:none; } .shelf-track { position:relative;width:max-content;min-width:100%;padding-bottom:38px; } .items-row { display:flex;align-items:flex-end;gap:16px;position:relative;z-index:2;min-width:max-content;min-height:195px; } .glass-shelf { position:absolute;left:0;right:0;bottom:0;height:38px;z-index:1;pointer-events:none;border-radius:17px 17px 22px 22px;background:linear-gradient(to bottom,rgba(255,255,255,.83),rgba(188,236,249,.54) 29%,rgba(94,189,220,.5) 74%,rgba(35,133,181,.43));border:1px solid rgba(255,255,255,.89);box-shadow:inset 0 2px 2px rgba(255,255,255,.86),inset 0 -7px 10px rgba(3,91,148,.2),0 11px 16px rgba(5,85,136,.23);backdrop-filter:blur(8px); } .glass-shelf::after { content:"";position:absolute;left:4%;right:11%;height:3px;top:5px;border-radius:50%;background:rgba(255,255,255,.85);filter:blur(.8px); }
.media-card { width:118px;flex:0 0 118px;align-self:flex-end;border:0;padding:0;border-radius:11px;background:#c7e8f1;overflow:hidden;position:relative;z-index:2;box-shadow:0 5px 10px rgba(4,70,121,.2),inset 0 0 0 1px rgba(255,255,255,.46);transform-origin:center bottom;transition:width .48s var(--ease-out),flex-basis .48s var(--ease-out),min-height .48s var(--ease-out),transform .32s var(--ease),box-shadow .32s var(--ease); text-align:left;cursor:pointer; } .media-card[role="button"]:focus-visible { outline:3px solid rgba(18,151,220,.36);outline-offset:2px; } .media-card.portrait { height:178px; } .media-card.square { height:148px;width:148px;flex-basis:148px; } .media-card:hover:not(.expanded) { transform:translateY(-4px) scale(1.015);box-shadow:0 10px 18px rgba(4,79,126,.22),0 0 12px rgba(190,249,255,.55); } .media-card img { display:block;width:100%;height:100%;object-fit:cover; } .media-card .fallback-cover { width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(155deg,#96dfee,#168dca);color:rgba(255,255,255,.9);font-weight:900;letter-spacing:-.07em;font-size:1.85rem; } .media-card .card-caption { position:absolute;left:0;right:0;bottom:0;padding:18px 10px 9px;opacity:0;transform:translateY(6px);background:linear-gradient(transparent,rgba(1,52,87,.76));color:white;font-size:.78rem;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .28s var(--ease),transform .28s var(--ease); } .media-card:hover .card-caption { opacity:1;transform:none; }
.media-card.add-card { display:grid;place-items:center;border:1px dashed rgba(15,128,181,.56);background:linear-gradient(150deg,rgba(244,255,255,.62),rgba(142,220,242,.56));color:#1380af;box-shadow:inset 0 1px rgba(255,255,255,.85),0 5px 12px rgba(12,111,163,.12); } .add-card b { display:block;font-size:2.1rem;font-weight:400;line-height:.8; } .add-card small { font-size:.75rem;font-weight:800;margin-top:8px; }
.media-card.expanded { width:min(620px,75vw);flex-basis:min(620px,75vw);min-height:300px;max-height:min(520px,72vh);height:auto;border-radius:16px;background:linear-gradient(130deg,rgba(242,255,255,.98),rgba(177,231,244,.92));display:grid;grid-template-columns:190px 1fr;gap:20px;padding:14px;overflow:hidden;box-shadow:0 16px 28px rgba(4,76,122,.24),inset 0 1px rgba(255,255,255,.9); z-index:3; } .media-card.expanded.square { min-height:300px; } .expanded img,.expanded .fallback-cover { width:190px;height:285px;border-radius:9px;object-fit:cover;box-shadow:0 5px 12px rgba(0,66,107,.2);align-self:start; } .expanded.square img,.expanded.square .fallback-cover { height:190px; } .expanded .card-caption { display:none; } .expanded-content { min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden; } .expanded-content h3 { margin:1px 28px 4px 0;font-size:1.35rem;letter-spacing:-.035em;line-height:1.05;color:#07577f;flex-shrink:0; } .creator-line { margin:0;color:#33718e;font-size:.84rem;font-weight:700;flex-shrink:0; } .expanded-scroll { flex:1;min-height:0;margin-top:10px;overflow-y:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:rgba(18,137,193,.28) transparent; } .work-description,.personal-note { margin:0 0 10px;color:#36718d;font-size:.8rem;line-height:1.4; } .personal-note { color:#12648a;font-weight:600;margin-bottom:0; } .details-line { margin:10px 0 0;display:flex;flex-wrap:wrap;gap:8px;color:#2a7496;font-size:.75rem;font-weight:800;flex-shrink:0; } .stars { letter-spacing:.02em;color:#168fc2; } .expanded-actions { display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:10px;flex-shrink:0; } .expanded-actions button { font-size:.78rem; } .delete-button { color:#a64a5c !important; } .collapse { position:absolute;right:10px;top:6px;font-size:1.45rem !important;line-height:1;color:#116d98; }
.composer { position:fixed;z-index:10;inset:0;display:grid;place-items:center;padding:25px; } .composer-backdrop { position:absolute;inset:0;background:rgba(9,77,117,.22);backdrop-filter:blur(10px); transition:opacity .3s var(--ease); } .composer-panel { position:relative;width:min(820px,100%);max-height:min(780px,calc(100vh - 50px));overflow:auto;border-radius:28px;padding:35px 38px 28px; transition:transform .35s var(--ease-out),opacity .35s var(--ease-out); } .composer-panel h2 { margin:0 0 23px;color:#075986;letter-spacing:-.055em;font-size:clamp(1.6rem,4vw,2.35rem); } .close-button { position:absolute;right:18px;top:15px;border:0;background:rgba(255,255,255,.47);color:#137baa;width:28px;height:28px;border-radius:50%;font-size:1.4rem;line-height:1; transition:background .2s var(--ease),transform .2s var(--ease); } .close-button:hover { background:rgba(255,255,255,.72); transform:scale(1.05); }
.item-form-heading { margin-bottom:18px; } .editor-grid { display:grid;grid-template-columns:190px 1fr;gap:27px; } .cover-preview { width:190px;height:278px;border-radius:10px;overflow:hidden;background:linear-gradient(145deg,#a8e8f4,#298dc5);box-shadow:0 8px 16px rgba(8,89,140,.2); } .cover-preview.square { height:190px; } .cover-preview img { width:100%;height:100%;object-fit:cover; } .cover-preview span { display:grid;place-items:center;width:100%;height:100%;color:white;font-weight:900;letter-spacing:-.09em;font-size:2.2rem; } .upload-label { margin-top:15px;display:inline-flex;color:#127daa;font-size:.78rem;cursor:pointer; } .upload-label input { position:absolute;width:1px;height:1px;opacity:0; } .field-grid { display:grid;grid-template-columns:1fr 1fr;gap:13px;align-content:start; } .full-field { grid-column:1/-1; } .optional { color:#5790a9;font-weight:500;letter-spacing:0; } .field-grid input,.field-grid textarea,.field-grid select { padding:9px 10px;font-size:.84rem; } .composer-footer { display:flex;justify-content:flex-end;align-items:center;margin-top:22px; } .composer-footer .aqua-button { min-width:132px; }
.item-detail-panel { width:min(560px,100%); padding-top:30px; }
.item-detail-content { max-height:calc(100dvh - 120px); overflow:auto; padding-right:2px; }
.item-detail-body { display:grid; gap:18px; }
.item-detail-cover { display:flex; justify-content:center; }
.item-detail-cover img,.item-detail-cover .fallback-cover { width:min(180px,42vw); aspect-ratio:2/3; border-radius:10px; object-fit:cover; box-shadow:0 8px 16px rgba(8,89,140,.18); }
.item-detail-body.square .item-detail-cover img,.item-detail-body.square .item-detail-cover .fallback-cover { aspect-ratio:1; }
.item-detail-copy h2 { margin:0 0 6px; font-size:clamp(1.15rem,4.5vw,1.45rem); letter-spacing:-.035em; line-height:1.08; color:#07577f; }
.item-detail-actions { margin-top:16px; padding-top:12px; border-top:1px solid rgba(61,157,201,.18); }
.item-detail-actions button { min-height:44px; padding:8px 12px; font-size:.84rem; }
@media (max-width:700px) {
  .atmosphere::before,.atmosphere::after,.atmosphere i,.atmosphere b,.atmosphere em { opacity:.28; filter:blur(24px); }
  .app-shell { width:min(100% - 32px,600px); }
  .auth-view { padding:max(24px,env(safe-area-inset-top)) 0 max(28px,env(safe-area-inset-bottom)); }
  .auth-panel { padding:32px 24px 26px; border-radius:24px; box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 12px 32px rgba(9,91,147,.12); }
  .auth-orb { display:none; }
  .auth-panel-top { margin-bottom:28px; gap:12px; }
  .wordmark { margin-bottom:0; gap:10px; }
  .wordmark-bubble { width:44px; height:36px; font-size:.92rem; }
  .wordmark small { font-size:.72rem; }
  .auth-form { gap:13px; }
  .aqua-button { min-height:44px; padding:12px 18px; }
  .topline { grid-template-columns:1fr auto; grid-template-rows:auto auto; gap:10px 12px; margin-bottom:18px; align-items:center; }
  .quiet-logo { font-size:1.35rem; }
  .stats { order:3; grid-column:1/-1; margin:0; text-align:center; font-size:.74rem; letter-spacing:.04em; }
  .profile { justify-self:end; gap:6px; font-size:.78rem; flex-wrap:wrap; justify-content:flex-end; }
  .lang-button { min-height:32px; padding:6px 10px; font-size:.68rem; }
  #username { max-width:min(42vw,140px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .shelf-view { padding:max(20px,env(safe-area-inset-top)) 0 max(72px,env(safe-area-inset-bottom)); }
  .shelf-toolbar { margin:0 0 22px; }
  .recommendations-button { width:100%; max-width:none; min-height:44px; padding:11px 16px; font-size:.82rem; box-shadow:0 6px 14px rgba(9,91,147,.1); }
  .shelves { gap:32px; }
  .shelf-heading { margin:0 0 10px; align-items:center; }
  .shelf-label { font-size:.74rem; letter-spacing:.12em; }
  .shelf-count { margin-top:4px; font-size:.72rem; }
  .shelf-search-toggle { min-height:36px; padding:4px 8px; }
  .local-search { margin:0 0 10px; width:100%; }
  .local-search input { min-height:40px; padding:10px 12px; font-size:.84rem; border-radius:12px; }
  .empty-state { margin:2px 0 12px; font-size:.82rem; }
  .shelf-window { margin:0 -8px; padding:4px 8px 20px; min-height:220px; -webkit-overflow-scrolling:touch; }
  .items-row { gap:14px; min-height:185px; }
  .glass-shelf { height:34px; border-radius:14px 14px 18px 18px; }
  .media-card:hover:not(.expanded) { transform:none; box-shadow:0 5px 10px rgba(4,70,121,.2),inset 0 0 0 1px rgba(255,255,255,.46); }
  .media-card .card-caption { opacity:1; transform:none; padding:14px 8px 7px; font-size:.72rem; }
  .media-card.expanded { width:min(100%,calc(100vw - 32px)); flex-basis:min(100%,calc(100vw - 32px)); min-height:0; max-height:min(520px,78dvh); grid-template-columns:108px 1fr; gap:12px; padding:12px; border-radius:14px; }
  .expanded img,.expanded .fallback-cover { width:108px; height:162px; border-radius:8px; }
  .expanded.square img,.expanded.square .fallback-cover { height:108px; }
  .expanded-content h3 { font-size:1.08rem; margin-right:24px; }
  .creator-line { font-size:.78rem; }
  .work-description,.personal-note { font-size:.78rem; line-height:1.45; }
  .details-line { font-size:.72rem; gap:6px; }
  .expanded-actions { gap:10px; padding-top:8px; }
  .expanded-actions button { min-height:36px; padding:4px 6px; }
  .collapse { right:8px; top:4px; width:32px; height:32px; display:grid; place-items:center; }
  .composer { padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); align-items:end; }
  .composer-panel { width:100%; max-height:calc(100dvh - 16px); padding:28px 18px 18px; border-radius:20px 20px 16px 16px; }
  .composer-panel h2 { margin-bottom:18px; font-size:1.45rem; }
  .close-button { right:12px; top:12px; width:36px; height:36px; }
  .editor-grid { grid-template-columns:1fr; gap:18px; }
  .cover-editor { display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
  .cover-preview { width:108px; height:162px; }
  .cover-preview.square { height:108px; }
  .upload-label { margin-top:0; min-height:36px; display:inline-flex; align-items:center; }
  .field-grid { grid-template-columns:1fr; gap:12px; }
  .full-field { grid-column:auto; }
  .field-grid input,.field-grid textarea,.field-grid select { min-height:44px; padding:10px 12px; font-size:.88rem; border-radius:12px; }
  .field-grid textarea { min-height:88px; }
  .composer-footer { margin-top:18px; }
  .composer-footer .aqua-button { width:100%; min-width:0; min-height:46px; }
  .recommendations-panel { padding:28px 18px 18px; }
  .recommendations-content { max-height:calc(100dvh - 148px); gap:20px; }
  .recommendation-entry { grid-template-columns:52px 1fr; gap:10px; padding:10px; border-radius:12px; }
  .recommendation-entry img,.recommendation-entry .fallback-cover { width:52px; height:78px; }
  .recommendation-entry.square img,.recommendation-entry.square .fallback-cover { height:52px; }
  .recommendation-copy strong { font-size:.88rem; }
  .recommendation-copy span,.recommendation-copy p { font-size:.74rem; }
  .shelf-options { margin-top:4px; padding:14px 16px; border-radius:14px; }
  .shelf-option .checkbox-line { min-height:44px; align-items:center; }
  .item-detail-panel { padding:26px 18px 18px; max-height:calc(100dvh - 16px); }
  .item-detail-content { max-height:calc(100dvh - 96px); }
  .item-detail-actions { display:flex; gap:12px; flex-wrap:wrap; }
  .item-detail-actions .text-button { flex:1; min-width:calc(50% - 6px); text-align:center; border:1px solid rgba(61,157,201,.22); border-radius:12px; background:rgba(255,255,255,.42); }
  .item-detail-actions .delete-button { border-color:rgba(166,74,92,.24); }
}
@media (max-width:420px) {
  .app-shell { width:min(100% - 24px,600px); }
  .auth-panel { padding:28px 20px 22px; }
  .media-card { width:104px; flex:0 0 104px; border-radius:10px; }
  .media-card.portrait { height:156px; }
  .media-card.square { width:124px; flex-basis:124px; height:124px; }
  .items-row { gap:12px; min-height:172px; }
  .shelf-window { min-height:205px; padding-bottom:18px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important;transition-duration:.01ms !important; } }