:root { --paper:#f5efe7; --ink:#26221e; --muted:#6b635a; --rose:#c58d87; --sage:#647260; --card:rgba(255,255,255,.78); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); font-family:"DM Sans",sans-serif; background:radial-gradient(circle at 15% 10%,rgba(217,180,174,.35),transparent 40%),linear-gradient(180deg,#f7f1ea,#efe7dc); }
.media-shell { width:min(760px,calc(100% - 1.5rem)); margin:auto; padding:1rem 0 3rem; }
.media-nav { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.media-nav a { color:var(--ink); text-decoration:none; font-weight:700; }
.media-card { width:100%; min-width:0; padding:clamp(1rem,4vw,2rem); border:1px solid rgba(255,255,255,.8); border-radius:24px; background:var(--card); box-shadow:0 18px 45px rgba(38,34,30,.12); backdrop-filter:blur(10px); }
.eyebrow { margin:0; color:var(--muted); text-transform:uppercase; letter-spacing:.22em; font-size:.72rem; }
h1 { margin:.4rem 0 .7rem; font-family:"Cormorant Garamond",serif; font-size:clamp(2.2rem,10vw,4rem); line-height:.95; }
p { line-height:1.55; }
.login-form,.upload-form,.profile-form,.guestbook-form { display:grid; min-width:0; gap:.9rem; margin-top:1.25rem; }
label { font-weight:700; }
input[type="password"],input[type="text"],textarea { display:block; width:100%; max-width:100%; min-width:0; min-height:52px; border:1px solid rgba(38,34,30,.2); border-radius:14px; padding:.8rem 1rem; font:inherit; background:white; }
textarea { min-height:135px; resize:vertical; }
button,.action-link { min-height:52px; border:0; border-radius:999px; padding:.8rem 1.1rem; font:inherit; font-weight:700; cursor:pointer; color:white; background:linear-gradient(135deg,#d9b4ae,var(--rose)); text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
button.secondary,.action-link.secondary { color:var(--ink); background:#fff; border:1px solid rgba(38,34,30,.14); }
button.danger { background:#8c403c; }
.drop-zone { display:grid; place-items:center; min-height:190px; padding:1.2rem; text-align:center; border:2px dashed rgba(38,34,30,.25); border-radius:20px; background:rgba(255,255,255,.55); cursor:pointer; }
.drop-zone input { position:absolute; width:1px; height:1px; opacity:0; }
.drop-zone strong { display:block; font-size:1.15rem; }
.drop-zone small { display:block; margin-top:.55rem; color:var(--muted); }
.status { min-height:1.5rem; color:var(--muted); }
.status.error { color:#8c403c; }
.progress { height:12px; overflow:hidden; border-radius:999px; background:rgba(38,34,30,.1); }
.progress span { display:block; width:0; height:100%; background:var(--sage); transition:width .15s; }
.hidden { display:none !important; }
.admin-actions { display:flex; flex-wrap:wrap; gap:.65rem; margin-bottom:1rem; }
.media-list { display:grid; gap:.8rem; }
.media-row { display:grid; grid-template-columns:72px 1fr auto; gap:.8rem; align-items:center; padding:.7rem; border-radius:16px; background:rgba(255,255,255,.72); }
.media-row img,.media-row video { width:72px; height:72px; object-fit:contain; border-radius:10px; background:#222; }
.media-row__name { overflow-wrap:anywhere; font-weight:700; }
.media-row__meta { color:var(--muted); font-size:.84rem; }
.media-row__sender { margin-top:.35rem; font-weight:700; }
.media-row__message { margin:.25rem 0 0; color:var(--muted); white-space:pre-wrap; }
.media-row__actions { display:flex; gap:.4rem; }
.media-row__actions a,.media-row__actions button { min-height:42px; width:72px; padding:.4rem; }
.upload-message,.guestbook-form { display:grid; gap:.7rem; }
.upload-message > small,.upload-message label small { color:var(--muted); font-weight:400; }
.guestbook-form { margin:1.2rem 0 2rem; }
.guestbook-list { display:grid; gap:.8rem; }
.guestbook-entry { padding:1rem; border-radius:16px; background:rgba(255,255,255,.72); border:1px solid rgba(38,34,30,.08); }
.guestbook-entry__head { display:flex; justify-content:space-between; gap:1rem; align-items:baseline; }
.guestbook-entry__head strong { font-family:"Cormorant Garamond",serif; font-size:1.35rem; }
.guestbook-entry__head small { color:var(--muted); }
.guestbook-entry p { margin:.55rem 0 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.guestbook-entry__delete { min-height:42px; margin-top:.7rem; }
.admin-guestbook { margin-top:2rem; padding-top:1rem; border-top:1px solid rgba(38,34,30,.14); }
.media-card h2 { font-family:"Cormorant Garamond",serif; font-size:2rem; margin:1.2rem 0 .5rem; }
.profile-form { display:grid; gap:.8rem; margin-top:1.2rem; }
.recognized { padding:.7rem .9rem; border-radius:12px; background:rgba(100,114,96,.12); }
.text-button { min-height:auto; padding:.2rem .5rem; margin-left:.4rem; color:var(--ink); background:transparent; text-decoration:underline; }
.drawing-field { min-width:0; margin:0; padding:.85rem; border:1px solid rgba(38,34,30,.16); border-radius:16px; }
.drawing-field legend { padding:0 .35rem; font-weight:700; }
.drawing-field legend small { color:var(--muted); font-weight:400; }
.drawing-tools { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin-bottom:.7rem; }
.drawing-tools label:not(.image-picker) { display:flex; align-items:center; gap:.4rem; }
.drawing-tools button,.drawing-tools .action-link { min-height:42px; }
.image-picker { position:relative; cursor:pointer; }
.image-picker input { position:absolute; width:1px; height:1px; opacity:0; }
.drawing-canvas { display:block; width:100%; height:auto; aspect-ratio:3/2; border:1px solid rgba(38,34,30,.18); border-radius:12px; background:#fffdf9; touch-action:none; }
.drawing-canvas--locked { touch-action:auto; pointer-events:none; opacity:.72; }
.drawing-field > small { display:block; margin-top:.55rem; color:var(--muted); }
.guestbook-entry__art { width:100%; margin-top:.8rem; border-radius:12px; background:#fffdf9; }
.guest-gallery { display:grid; gap:1rem; }
.guest-gallery__group { padding:.8rem; border-radius:16px; background:rgba(255,255,255,.65); }
.guest-gallery__group h3 { margin:0 0 .6rem; font-family:"Cormorant Garamond",serif; font-size:1.5rem; }
.guest-gallery__media { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:.5rem; }
.guest-gallery__media img,.guest-gallery__media video { width:100%; aspect-ratio:1; object-fit:contain; border-radius:10px; background:#222; }
@media (max-width:560px) { .media-shell { width:min(100% - 1rem,760px); padding:.65rem 0 2rem; } .media-nav { font-size:.88rem; } .media-card { padding:1rem; border-radius:18px; } .media-card h1 { font-size:clamp(2rem,12vw,3rem); } .drawing-tools { display:grid; grid-template-columns:1fr 1fr; align-items:stretch; } .drawing-tools label:not(.image-picker) { min-height:42px; } .drawing-tools input[type="range"] { width:100%; } .drawing-tools .draw-toggle,.drawing-tools .image-picker,.drawing-tools [data-clear-art] { width:100%; } .drawing-tools .draw-toggle { grid-column:1/-1; } .drawing-canvas { aspect-ratio:4/3; } }
@media (max-width:560px) { .media-row { grid-template-columns:56px 1fr; } .media-row img,.media-row video { width:56px;height:56px; } .media-row__actions { grid-column:1/-1; } .media-row__actions a,.media-row__actions button { width:auto; flex:1; } }