:root { color-scheme: dark; --bg: #190d14; --panel: #281923; --text: #fff4ed; --muted: #c5aeb7; --rose: #ff9daa; --line: #ffffff15; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--text); background: var(--bg); font-size: 1rem; line-height: 1.5; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .45; }
a { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.login-page { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding: clamp(1.5rem,5vw,4rem); background: linear-gradient(90deg, #19080dec, #19080d99), url('../../assets/fragola.webp') 70% center / cover fixed; }
.home-link { align-self: flex-start; font-size: .9375rem; text-decoration: none; padding-block: .5rem; color: #e5cbd2; }
.login-card { margin: auto; width: min(100%, 25rem); padding: 2.5rem 0; }
.login-mark { display: block; font-size: 3rem; margin-bottom: .75rem; }
.login-card h1 { font: 400 clamp(2.5rem,8vw,3.5rem)/1.12 Georgia, serif; letter-spacing: -.035em; margin: 0; }
.login-intro { color: var(--muted); margin: .9rem 0 2rem; }
.login-form { display: grid; gap: .6rem; }
.login-form label { font-size: .9375rem; color: #ecd3db; }
.login-form input, .login-form select { width: 100%; min-height: 50px; border: 1px solid #95707d; border-radius: 10px; padding: .7rem .9rem; color: var(--text); background: #2b1723; margin-bottom: .7rem; }
.primary-button { border: 0; border-radius: 10px; background: var(--rose); color: #32111d; font-weight: 600; min-height: 50px; margin-top: .65rem; }
.primary-button:hover { background: #ffbbc4; }
.form-error, .form-notice { padding: .8rem 1rem; border-radius: 9px; background: #601e38; color: #ffe6ee; font-size: .9375rem; }
.form-notice { background: #39252e; }
.settings-help { margin: 0; font-size: .875rem; color: var(--muted); }
.settings-links { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.4rem; color: #efd0da; }
.settings-links a { min-height: 44px; display: inline-flex; align-items: center; }
.diary-page { min-height: 100vh; background: linear-gradient(110deg, #19080df2, #27101bea), url('../../assets/fragola.webp') center / cover fixed; }
.diary-header { max-width: 1120px; padding: 1.3rem 1.5rem; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid #ffffff18; }
.diary-brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; font: 1.4rem Georgia, serif; white-space: nowrap; }
.diary-brand span { font-family: sans-serif; font-size: 1.9rem; }
.diary-header nav { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; font-size: .875rem; }
.diary-header nav a, .diary-header nav button { min-height: 44px; display: inline-flex; align-items: center; color: #f1d4df; text-decoration: none; border: 0; background: transparent; border-radius: 6px; padding: .35rem .2rem; }
.diary-header form { margin: 0; }
.diary-main { max-width: 1080px; margin: auto; padding: 1.2rem 1.5rem 3rem; }
.signed-in { margin: 0 0 1rem; color: #c9aab7; font-size: .8125rem; }
.signed-in strong { font-weight: 500; color: #f3dbe3; }
.diary-intro { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.5rem 0 2rem; }
.eyebrow { text-transform: uppercase; letter-spacing: .16em; color: #e6acbe; font-size: .6875rem; font-weight: 600; margin: 0 0 .9rem; }
.diary-intro h1 { font: 400 clamp(2.6rem,5vw,4.1rem)/1.1 Georgia, serif; letter-spacing: -.04em; margin: 0 0 .8rem; }
.diary-intro p:not(.eyebrow) { color: #d9bdc8; margin: 0; }
.primary-button, .secondary-button, .danger-button { display: inline-flex; justify-content: center; align-items: center; gap: .4rem; min-height: 46px; padding: .7rem 1.1rem; text-decoration: none; font-size: .9375rem; text-align: center; border-radius: 10px; }
.diary-intro > .primary-button { flex-shrink: 0; margin: 0; }
.secondary-button { color: inherit; background: transparent; border: 1px solid #b184965c; font-weight: 500; }
.secondary-button:hover { background: #a7738715; }
.diary-filters { display: flex; align-items: flex-end; flex-wrap: wrap; gap: .75rem; padding: 1.2rem; border: 1px solid #dfb7c526; border-radius: 14px; background: #2a1522d9; margin: 0 0 2rem; }
.diary-filters > div { min-width: 0; }
.filter-search { flex: 1; min-width: 200px !important; }
.diary-filters label { display: block; font-size: .75rem; color: #dfbdcb; margin-bottom: .35rem; }
.diary-filters input, .diary-filters select { color-scheme: dark; width: 100%; min-height: 46px; padding: .6rem .75rem; background: #1a1018; color: #fff0f4; border: 1px solid #8b637567; border-radius: 8px; font: inherit; font-size: 1rem; }
.reset-filters { font-size: .8125rem; display: inline-flex; align-items: center; min-height: 46px; color: #f1c1d4; }
.diary-results { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .8125rem; color: #c9aab7; margin: 0 0 .8rem; }
.entry-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.25rem; align-items: start; }
.entry-card, .diary-sheet { color-scheme: light; color: #422731; background: #fff8ef; border: 1px solid #f9dcc9; box-shadow: 0 12px 35px #09000526; border-radius: 12px; overflow: hidden; }
.entry-card { display: flex; flex-direction: column; height: 100%; }
.entry-card-content { padding: 1.6rem 1.5rem .5rem; }
.entry-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .55rem; color: #765562; font-size: .75rem; }
.entry-meta time { letter-spacing: .035em; }
.author-badge { display: inline-block; border-radius: 999px; background: #f3e2df; padding: .2rem .6rem; color: #73394e; font-size: .6875rem; }
.entry-card h2 { font: 400 1.9rem/1.15 Georgia, serif; margin: 1.2rem 0 .85rem; letter-spacing: -.025em; overflow-wrap: anywhere; }
.entry-card h2 a { color: inherit; text-decoration: none; }
.entry-card h2 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.entry-excerpt { margin: 0 0 .8rem; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .9375rem; line-height: 1.7; color: #694d58; }
.entry-cover { display: block; margin: .5rem 1.5rem 1rem; border-radius: 8px; overflow: hidden; }
.entry-cover img { display: block; width: 100%; height: 240px; object-fit: cover; }
.entry-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .4rem 1.5rem .8rem; margin-top: auto; border-top: 1px solid #a86b831b; }
.entry-card-actions a { display: inline-flex; align-items: center; min-height: 44px; gap: .5rem; color: #75384e; font-size: .8125rem; text-decoration: none; }
.entry-card-actions a:hover { text-decoration: underline; }
.empty-diary { text-align: center; padding: 4rem 1.5rem; border: 1px dashed #a4778a67; border-radius: 16px; background: #36182255; }
.empty-diary > span { color: #eaa7b9; font-size: 2.2rem; }
.empty-diary h2 { font: 400 2rem/1.2 Georgia,serif; }
.empty-diary p { color: #d7b7c4; max-width: 28rem; margin: 0 auto 1.5rem; }
.pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1rem; padding: 2rem 0 0; font-size: .875rem; }
.diary-footer { text-align: center; color: #c0a1ae; font-size: .75rem; padding: 0 1rem 2rem; }
.diary-footer span { margin: 0 .4rem; }
.back-link { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; margin: .3rem 0 1rem; text-decoration: none; color: #eed0db; }
.diary-sheet { max-width: 820px; margin: 0 auto; padding: clamp(1.4rem,4vw,3.5rem); }
.diary-sheet h1 { font: 400 clamp(2.2rem,5vw,3.2rem)/1.12 Georgia,serif; letter-spacing: -.03em; margin: 1.3rem 0 1.8rem; overflow-wrap: anywhere; }
.diary-sheet .eyebrow { color: #884b62; }
.diary-sheet .entry-meta { font-size: .8125rem; }
.entry-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1.0625rem; line-height: 1.85; }
.diary-photo { margin: 2rem 0 0; }
.diary-photo img { display: block; width: 100%; height: auto; max-height: 75vh; object-fit: contain; border-radius: 8px; background: #f3e7e2; }
.diary-photo figcaption { font-size: .75rem; color: #77535f; margin-top: .5rem; }
.sheet-footer { border-top: 1px solid #b994a348; margin-top: 2rem; padding-top: 1rem; display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; justify-content: space-between; }
.sheet-footer p { color: #735462; font-size: .75rem; margin: 0; }
.sheet-actions { display: flex; gap: 1rem; align-items: center; }
.delete-link { display: inline-flex; align-items: center; min-height: 44px; font-size: .8125rem; color: #a42b4b; }
.editor-intro { color: #785562; margin-top: -.7rem; font-size: .9375rem; }
.entry-form { margin-top: 2rem; }
.entry-form label { display: block; font-size: .875rem; font-weight: 600; margin: 0 0 .5rem; color: #583443; }
.entry-form label span, .photo-field legend span { font-weight: 400; color: #7b5a67; }
.entry-form input:not([type="hidden"]):not([type="checkbox"]):not([type="file"]), .entry-form textarea { font: inherit; font-size: 1rem; color: #35202c; background: #fffdf9; border: 1px solid #b18a9975; border-radius: 8px; padding: .75rem .85rem; min-width: 0; width: 100%; min-height: 48px; }
.entry-form input::placeholder, .entry-form textarea::placeholder { color: #8b6c79; }
.entry-form-heading { display: grid; grid-template-columns: 12rem minmax(0,1fr); gap: 1rem; margin-bottom: 1.5rem; }
.entry-form-heading > div { min-width: 0; }
.entry-form textarea { display: block; resize: vertical; min-height: 260px; line-height: 1.75; }
.writing-tools { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; align-items: center; color: #775363; font-size: .75rem; margin: .4rem 0 1.5rem; }
.emoji-picker { position: relative; }
.emoji-picker summary { min-height: 44px; cursor: pointer; display: flex; align-items: center; font-size: .875rem; border-radius: 6px; }
.emoji-picker summary:focus-visible { outline: 3px solid #973e62; outline-offset: 3px; }
.emoji-options { display: grid; grid-template-columns: repeat(6,44px); padding: .4rem; position: absolute; top: 100%; left: 0; z-index: 3; background: #fffaf6; box-shadow: 0 6px 25px #38202c30; border: 1px solid #c39aa8; border-radius: 12px; }
.emoji-options button { min-height: 44px; border: none; background: transparent; font-size: 1.5rem; border-radius: 6px; }
.emoji-options button:hover { background: #f6e3ea; }
.photo-field { min-width: 0; margin: 0; padding: 1.25rem; border: 1px dashed #b18a99; border-radius: 10px; }
.photo-field legend { color: #583443; font-size: .875rem; font-weight: 600; padding: 0 .3rem; }
.field-hint { color: #755563; font-size: .8125rem; margin: 0 0 .9rem; }
.photo-field input[type="file"] { width: 100%; min-height: 48px; color: #6c4054; font-size: .8125rem; }
.photo-field input[type="file"]::file-selector-button { border: 1px solid #b18a99; padding: .65rem .85rem; margin: 0 .65rem .5rem 0; border-radius: 7px; color: #623447; background: #f5e5e4; font: inherit; cursor: pointer; min-height: 44px; }
.existing-photo, .selected-photo { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; margin: 0 0 1rem; }
.existing-photo img, .selected-photo img { display: block; max-width: min(100%,180px); max-height: 180px; width: auto; height: auto; border-radius: 7px; }
.entry-form .checkbox-label { display: flex; align-items: center; min-height: 44px; gap: .5rem; font-size: .8125rem; font-weight: 400; }
.checkbox-label input { width: 20px; height: 20px; accent-color: #873452; }
#photo-status:empty { display: none; }
.editor-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.5rem; }
.editor-actions > a { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; color: #78485d; }
.diary-sheet .primary-button, .danger-button { background: #7a304e; color: #fff9f2; border: 0; margin: 0; font-weight: 600; }
.diary-sheet .primary-button:hover { background: #95415f; }
.danger-button { background: #a02546; }
.diary-sheet button:focus-visible, .diary-sheet input:focus-visible, .diary-sheet textarea:focus-visible, .diary-sheet a:focus-visible { outline-color: #953259; }
.delete-sheet { max-width: 620px; margin-top: 2rem; }
@media (max-width: 720px) {
  .diary-header { flex-direction: column; align-items: flex-start; gap: .25rem; padding: 1rem 1.2rem .7rem; }
  .diary-header nav { width: 100%; justify-content: space-between; }
  .diary-main { padding: 1rem 1rem 2.5rem; }
  .diary-intro { flex-direction: column; align-items: flex-start; gap: 1.5rem; padding-top: 1rem; }
  .diary-intro h1 { font-size: 2.7rem; }
  .diary-filters { padding: 1rem; }
  .filter-search { flex-basis: 100%; }
  .diary-filters > div:not(.filter-search) { flex: 1; min-width: 120px; }
  .entry-grid { grid-template-columns: minmax(0,1fr); }
  .entry-card-content { padding: 1.4rem 1.3rem .5rem; }
  .entry-cover { margin-inline: 1.3rem; }
  .entry-form-heading { grid-template-columns: minmax(0,1fr); }
  .diary-sheet { padding: 1.4rem 1.25rem; }
  .diary-sheet h1 { font-size: 2.3rem; }
  .entry-body { font-size: 1rem; }
  .photo-field { padding: 1rem .75rem; }
}
@media (max-width: 360px) { .diary-main { padding-inline: .6rem; } .diary-sheet { padding-inline: 1rem; } .emoji-options { grid-template-columns: repeat(5,44px); } }