:root {
  color-scheme: light;
  --ink: #171914;
  --muted: #686b64;
  --soft: #979991;
  --canvas: #f4f5f6;
  --surface: #ffffff;
  --line: #e6e7e8;
  --line-strong: #d7d9dc;
  --accent: #b7822e;
  --accent-soft: #f4ead7;
  --success: #168651;
  --danger: #b54237;
  --shadow: 0 12px 30px rgba(25, 29, 28, .07);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--canvas);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { min-width: 320px; margin: 0; background: var(--canvas); }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .55; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(183, 130, 46, .38); outline-offset: 2px; }

.app-shell { min-height: 100vh; }
.loading-view { display: grid; min-height: 100vh; place-items: center; align-content: center; gap: 14px; color: var(--muted); background: #fcfcfb; }
.loading-view p { margin: 0; font-size: 14px; }
.brand-mark { display: block; width: 36px; height: 36px; border-radius: 9px; object-fit: cover; }
.eyebrow, .kicker { margin: 0; color: var(--accent); font-size: 11px; font-weight: 750; letter-spacing: .16em; line-height: 1.4; }

/* Account entrance */
.auth-view { display: grid; min-height: 100vh; grid-template-columns: minmax(360px, 1.1fr) minmax(480px, .9fr); background: #fcfcfa; }
.auth-brand { position: absolute; z-index: 2; top: 36px; left: 48px; display: flex; align-items: center; gap: 12px; }
.auth-brand .brand-mark { width: 38px; height: 38px; }
.auth-brand h1 { margin: 2px 0 0; font-size: 16px; font-weight: 720; letter-spacing: -.02em; }
.auth-brand .eyebrow { color: #696c60; font-size: 9px; letter-spacing: .12em; }
.auth-copy { position: relative; display: grid; min-height: 100vh; align-content: center; justify-items: start; overflow: hidden; padding: 150px clamp(42px, 9vw, 140px) 92px; background: #747b5a; }
.auth-illustration { position: absolute; z-index: 0; top: -76px; right: 0; width: 100%; height: calc(100% + 76px); object-fit: cover; object-position: center; }
.auth-copy-content { position: relative; z-index: 1; max-width: min(520px, 90%); transform: translateY(-76px); }
.auth-copy h2 { max-width: 560px; margin: 17px 0 15px; color: #20231d; font-size: clamp(38px, 4vw, 62px); font-weight: 760; letter-spacing: -.07em; line-height: 1.08; }
.auth-copy-content > p:not(.kicker) { max-width: 355px; margin: 0; color: #f2efe3; font-size: 15px; line-height: 1.85; }
.auth-side { display: grid; min-width: 0; align-content: center; padding: 80px 28px 50px; background: #fcfcfa; }
.auth-panel { width: min(440px, 100%); margin: 0 auto 22px; padding: 40px; border: 1px solid #e3e3dc; background: #fffefa; box-shadow: 0 16px 38px rgba(37, 40, 30, .055); }
.auth-tabs { display: flex; gap: 28px; margin-bottom: 30px; border-bottom: 1px solid var(--line); }
.auth-tab { position: relative; min-height: 42px; padding: 0; border: 0; background: transparent; color: var(--soft); font-size: 16px; font-weight: 650; }
.auth-tab.active { color: var(--ink); }
.auth-tab.active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 3px; content: ""; background: var(--accent); }
.auth-form { display: grid; gap: 18px; }
.auth-form label, .modal-panel label, .event-fields label { display: grid; gap: 8px; color: #41443e; font-size: 13px; font-weight: 650; }
.auth-form-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: -6px; color: var(--soft); font-size: 12px; }
.auth-inline-link { border: 0; padding: 0; color: var(--accent); background: transparent; font-size: 12px; font-weight: 720; }
.auth-inline-link:hover { color: #8a5c16; text-decoration: underline; }
.agreement-check { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 9px !important; color: var(--muted) !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.65; }
.agreement-check input { width: 15px; min-height: 15px; margin: 3px 0 0; accent-color: var(--accent); }
.agreement-check a, .auth-footer a { color: var(--accent); font-weight: 700; text-decoration: none; }
.agreement-check a:hover, .auth-footer a:hover { text-decoration: underline; }
input, textarea, select { width: 100%; min-height: 46px; padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: 4px; color: var(--ink); background: #fff; font-size: 14px; transition: border-color .16s ease, box-shadow .16s ease; }
input::placeholder, textarea::placeholder { color: #a8aaa6; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(183, 130, 46, .1); outline: none; }
textarea { min-height: 96px; resize: vertical; }
.primary-button, .secondary-button, .danger-button, .quiet-button, .text-button, .back-button, .text-action { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 4px; padding: 9px 16px; font-size: 14px; font-weight: 700; line-height: 1.2; text-decoration: none; transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease; }
.primary-button { color: #fff; background: var(--ink); }
.primary-button:hover { background: #30332d; }
.primary-button span { font-size: 17px; font-weight: 400; }
.secondary-button { color: var(--ink); border-color: var(--line-strong); background: #fff; }
.secondary-button:hover { border-color: var(--ink); }
.danger-button { color: var(--danger); border-color: #e5bbb6; background: #fffafa; }
.danger-button:hover { background: #fff1ef; }
.quiet-button, .back-button, .text-button { color: var(--muted); border-color: transparent; background: transparent; }
.quiet-button:hover, .back-button:hover, .text-button:hover { color: var(--ink); background: #f0f1ef; }
.text-button { min-height: 34px; padding: 6px 0; border-radius: 0; color: var(--accent); }
.text-action { color: var(--ink); background: #fff; }
.text-action:hover { background: #f4f5f3; }
.auth-footer { width: min(440px, 100%); margin: 0 auto; color: var(--soft); font-size: 12px; line-height: 1.7; text-align: center; }
.form-note { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.form-message { min-height: 20px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.form-message.is-error { color: var(--danger); }
.form-message.is-success { color: var(--success); }

/* Workspace */
.workspace-view { min-height: 100vh; }
.topbar, .project-topbar { display: flex; min-height: 74px; align-items: center; justify-content: space-between; gap: 24px; padding: 0 clamp(24px, 4vw, 64px); border-top: 3px solid var(--ink); border-bottom: 1px solid var(--line); background: #fff; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 17px; font-weight: 760; text-decoration: none; letter-spacing: -.03em; }
.logo .brand-mark { width: 30px; height: 30px; border-radius: 7px; }
.account-menu { position: relative; z-index: 30; display: flex; align-items: center; gap: 8px; }
.account-button { display: inline-flex; min-height: 38px; align-items: center; gap: 9px; padding: 4px 9px 4px 4px; border: 0; border-radius: 5px; background: transparent; color: var(--ink); font-size: 14px; font-weight: 650; }
.account-button:hover, .account-menu.is-open .account-button { background: #f2f3f0; }
.account-button > span:first-child { display: grid; width: 30px; height: 30px; place-items: center; overflow: hidden; border-radius: 50%; color: #fff; background: #54594e; font-size: 13px; }
.account-chevron { color: var(--soft); font-size: 16px; line-height: 1; transition: transform .16s ease; }
.account-menu.is-open .account-chevron { transform: rotate(180deg); }
.account-dropdown { position: absolute; top: calc(100% + 10px); right: 0; display: none; width: min(324px, calc(100vw - 28px)); padding: 12px; border: 1px solid #dedfdc; background: #fff; box-shadow: 0 16px 34px rgba(23, 25, 20, .16); }
.account-menu.is-open .account-dropdown { display: grid; }
.account-menu-user { display: grid; gap: 3px; padding: 8px 10px 14px; border-bottom: 1px solid var(--line); }
.account-menu-user strong { font-size: 15px; }
.account-menu-user small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.account-menu-user small:last-child { overflow: hidden; color: var(--soft); text-overflow: ellipsis; white-space: nowrap; }
.account-menu-item { display: flex; min-height: 42px; align-items: center; justify-content: space-between; gap: 14px; margin-top: 6px; padding: 8px 10px; border: 0; border-radius: 3px; color: var(--ink); background: transparent; font-size: 14px; font-weight: 650; text-align: left; }
.account-menu-item:hover { background: #f4f5f2; }
.membership-entry { align-items: center; color: #6a4d20; background: #fbf2de; }
.membership-entry:hover { background: #f6e6c6; }
.membership-entry span { display: inline-flex; align-items: center; gap: 7px; }
.membership-entry b { color: #bd8730; font-size: 13px; }
.membership-entry strong { color: #896322; font-size: 11px; font-weight: 700; }
.account-quota { display: grid; gap: 11px; margin: 8px 0 10px; padding: 13px 10px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fafaf8; }
.quota-row { display: grid; gap: 6px; }
.quota-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; }
.quota-heading strong { color: var(--ink); font-size: 13px; }
.quota-meter { height: 4px; overflow: hidden; background: #e1e3df; }
.quota-meter span { display: block; width: 0; height: 100%; background: #7b845e; transition: width .2s ease; }
.account-menu-signout { min-height: 36px; padding: 6px 10px; border: 0; color: var(--muted); background: transparent; font-size: 13px; font-weight: 650; text-align: left; }
.account-menu-signout:hover { color: var(--danger); }
.workspace-hero { display: flex; min-height: 190px; align-items: end; justify-content: space-between; gap: 24px; padding: 52px clamp(24px, 5vw, 80px) 34px; background: #f6f7f8; }
.workspace-hero h1 { margin: 7px 0 8px; font-size: clamp(30px, 3vw, 45px); letter-spacing: -.055em; line-height: 1.1; }
.workspace-hero p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 15px; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 28px clamp(24px, 5vw, 80px) 0; }
.summary-card { display: grid; min-height: 128px; align-content: space-between; padding: 21px; border: 1px solid var(--line); background: #fff; }
.summary-card span, .summary-card small { color: var(--muted); font-size: 13px; }
.summary-card strong { margin-top: 14px; font-size: 28px; letter-spacing: -.05em; }
.projects-section, .recycle-section { padding: 38px clamp(24px, 5vw, 80px) 0; }
.recycle-section { padding-bottom: 52px; }
.section-heading, .panel-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.section-heading h2, .panel-heading h2 { margin: 6px 0 0; font-size: 24px; letter-spacing: -.04em; }
.panel-heading > div > p:last-child { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.project-grid { display: grid; grid-template-columns: 1fr; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.project-card { display: grid; min-height: 124px; grid-template-columns: 94px minmax(260px, 1fr) minmax(210px, .75fr); grid-template-rows: auto 1fr; column-gap: 18px; padding: 16px 20px; border-bottom: 1px solid var(--line); background: var(--surface); transition: background .16s ease; }
.project-card:last-child { border-bottom: 0; }
.project-card:hover { background: #fbfbf8; }
.project-cover { grid-row: 1 / span 2; position: relative; display: grid; width: 94px; height: 94px; place-items: center; overflow: hidden; border: 1px solid var(--line); background: #20231d; }
.project-cover-image { width: 100%; height: 100%; object-fit: cover; }
.project-cover-initial { display: grid; width: 100%; height: 100%; place-items: center; color: #fff; font-size: 26px; font-weight: 760; }
.project-card-header, .project-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.project-card-header { grid-column: 2; align-self: end; }
.project-theme-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); }
.project-role { color: var(--muted); font-size: 12px; }
.project-card-body { grid-column: 2; align-self: start; }
.project-card-body h3 { display: -webkit-box; margin: 6px 0; overflow: hidden; font-size: 19px; letter-spacing: -.04em; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.project-meta, .project-location { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.project-public-link { color: var(--accent); font-size: 13px; font-weight: 700; text-decoration: none; }
.project-manage-button { min-height: 34px; padding: 6px 12px; border: 1px solid var(--ink); border-radius: 3px; color: #fff; background: var(--ink); font-size: 13px; font-weight: 700; }
.project-card-footer { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.empty-state { display: grid; min-height: 270px; place-items: center; align-content: center; gap: 9px; padding: 32px; border: 1px dashed #cfd2ce; color: var(--muted); background: rgba(255,255,255,.56); text-align: center; }
.empty-state h3 { margin: 6px 0 0; color: var(--ink); font-size: 19px; }
.empty-state p { max-width: 410px; margin: 0; font-size: 14px; line-height: 1.7; }
.empty-mark { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: var(--accent); background: var(--accent-soft); font-size: 24px; }
.recycle-list, .data-list { display: grid; border-top: 1px solid var(--line); }
.data-row { display: flex; min-height: 70px; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.data-row strong, .data-row small { display: block; }
.data-row strong { font-size: 14px; }
.data-row small { margin-top: 4px; color: var(--muted); font-size: 12px; }
.row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

/* Membership */
.membership-view { min-height: 100vh; color: #f6f4ed; background: #080907; }
.membership-topbar { position: sticky; z-index: 20; top: 0; display: grid; min-height: 66px; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 clamp(18px, 4vw, 62px); border-bottom: 1px solid #292b25; background: #080907; }
.membership-back { justify-self: start; display: inline-flex; min-height: 36px; align-items: center; gap: 7px; padding: 6px 0; border: 0; color: #bbbdb4; background: transparent; font-size: 13px; font-weight: 650; }
.membership-back:hover { color: #fff; }
.membership-back span { font-size: 17px; }
.membership-brand { display: inline-flex; align-items: center; gap: 8px; color: #f7f6f0; font-size: 15px; font-weight: 730; text-decoration: none; }
.membership-brand .brand-mark { width: 28px; height: 28px; border-radius: 7px; }
.membership-topbar-space { justify-self: end; width: 86px; }
.membership-main { width: min(1180px, calc(100% - 40px)); padding: clamp(42px, 7vw, 76px) 0 146px; margin: 0 auto; }
.membership-heading { max-width: 650px; }
.membership-kicker { margin: 0; color: #d9ac55; font-size: 11px; font-weight: 780; letter-spacing: .15em; }
.membership-heading h1 { margin: 11px 0 12px; color: #fffdf6; font-size: clamp(36px, 5vw, 58px); letter-spacing: -.075em; line-height: 1; }
.membership-heading > p:last-child { margin: 0; color: #a9aca1; font-size: 15px; line-height: 1.7; }
.membership-current-summary { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin: 42px 0 52px; padding: 22px 24px; border: 1px solid #33362d; background: #151711; }
.membership-current-title { display: grid; gap: 6px; min-width: 190px; }
.membership-current-title > span { color: #a8aa9f; font-size: 12px; }
.membership-current-title strong { color: #fbf6e9; font-size: 22px; letter-spacing: -.04em; }
.membership-current-title small { color: #8e9188; font-size: 12px; line-height: 1.5; }
.membership-usage { display: grid; grid-template-columns: repeat(3, minmax(118px, 1fr)); gap: 14px; width: min(600px, 100%); margin: 0; }
.membership-usage > div { min-width: 0; padding-left: 15px; border-left: 1px solid #35372f; }
.membership-usage dt { color: #999c92; font-size: 12px; }
.membership-usage dd { margin: 7px 0 0; overflow: hidden; color: #fffdf6; font-size: 15px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.membership-plan-section { min-width: 0; }
.membership-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 21px; }
.membership-section-heading h2 { margin: 7px 0 0; color: #fffdf6; font-size: 25px; letter-spacing: -.045em; }
.membership-section-heading > p { margin: 0; color: #8e9188; font-size: 12px; }
.membership-plan-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; padding: 3px 2px 0; }
.membership-storage-section { margin-top: 56px; }
.membership-plan-card { min-width: 0; display: grid; min-height: 364px; align-content: start; gap: 16px; padding: 22px; border: 1px solid var(--tier-line, #3e4239); border-radius: 18px; color: #f8f6ee; background: var(--tier-surface, #1a1d18); text-align: left; transition: border-color .16s ease, transform .16s ease, background .16s ease; }
.membership-storage-card { min-height: 306px; }
.membership-plan-card:not(:disabled):hover { transform: translateY(-3px); border-color: var(--tier-highlight, #e5ce9c); }
.membership-plan-card.is-selected { outline: 2px solid var(--tier-highlight, #e5ce9c); outline-offset: 2px; }
.membership-plan-card.is-current:disabled { cursor: default; opacity: .86; }
.membership-plan-card.is-current:disabled:hover { transform: none; }
.membership-card-top { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.membership-card-title { display: flex; align-items: center; gap: 8px; color: #f7f4e9; font-size: 15px; font-weight: 760; }
.membership-card-title i { display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid currentColor; border-radius: 50%; color: var(--tier-highlight, #dbc07e); font-size: 10px; font-style: normal; }
.membership-badge { padding: 4px 7px; border-radius: 999px; color: #191c15; background: #e5c26d; font-size: 10px; font-weight: 800; }
.membership-price { display: flex; align-items: baseline; gap: 4px; min-height: 43px; color: #fffdf6; }
.membership-price strong { font-size: 30px; letter-spacing: -.06em; }
.membership-price span { color: #bdc0b5; font-size: 12px; }
.membership-price-note { min-height: 34px; margin: -8px 0 0; color: #b6b8af; font-size: 12px; line-height: 1.5; }
.membership-card-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; border-radius: 10px; background: rgba(5, 7, 5, .28); }
.membership-card-metrics span { display: block; color: #c4c6bd; font-size: 11px; }
.membership-card-metrics strong { display: block; margin-top: 5px; color: #f9f7ef; font-size: 18px; letter-spacing: -.04em; }
.membership-card-benefits { display: grid; gap: 9px; margin: 0; padding: 0; color: #d7d9d0; font-size: 12px; line-height: 1.45; list-style: none; }
.membership-card-benefits li { position: relative; padding-left: 19px; }
.membership-card-benefits li::before { position: absolute; left: 0; color: var(--tier-highlight, #d8bf7a); content: "●"; font-size: 10px; }
.membership-message { min-height: 21px; margin: 18px 0 0; color: #d9bd7c; font-size: 13px; line-height: 1.55; }
.membership-message.is-error { color: #ed8d84; }
.membership-checkout { position: fixed; z-index: 25; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 15px max(20px, calc((100% - 1180px) / 2)); border-top: 1px solid #33362d; background: rgba(8, 9, 7, .97); }
.membership-checkout strong { display: block; color: #f8f6ef; font-size: 14px; }
.membership-checkout p { margin: 5px 0 0; color: #92958a; font-size: 11px; }
.membership-purchase { min-width: 244px; min-height: 48px; padding: 11px 18px; border: 1px solid #e7cf90; border-radius: 4px; color: #201b10; background: #e7cf90; font-size: 14px; font-weight: 780; }
.membership-purchase:not(:disabled):hover { background: #f0dca7; }
.membership-purchase:disabled { color: #85877f; border-color: #36382f; background: #1f211c; opacity: 1; }

/* Project management */
.project-topbar { position: sticky; z-index: 10; top: 0; padding-right: clamp(18px, 4vw, 64px); padding-left: clamp(18px, 3vw, 44px); }
.project-topbar-title { min-width: 0; flex: 1; }
.project-topbar-title h1 { margin: 3px 0 0; overflow: hidden; font-size: 18px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.project-topbar-title .eyebrow { color: var(--soft); font-size: 9px; }
.project-topbar-actions { display: flex; align-items: center; gap: 8px; }
.sync-download-button { display: inline-flex; min-height: 40px; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid #252820; border-radius: 4px; color: #fffdf7; background: #252820; font-size: 13px; font-weight: 720; line-height: 1.15; text-decoration: none; transition: background .16s ease, transform .16s ease; }
.sync-download-button:hover { background: #444936; transform: translateY(-1px); }
.sync-download-icon { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; color: #26291f; background: #e5bd68; font-size: 17px; font-weight: 800; line-height: 1; }
.sync-download-button small { padding-left: 7px; border-left: 1px solid rgba(255,255,255,.26); color: #d8dacd; font-size: 10px; font-weight: 550; }
.project-layout { display: grid; min-height: calc(100vh - 74px); grid-template-columns: 188px minmax(0, 1fr); }
.project-sidebar { display: flex; flex-direction: column; padding: 22px 12px; border-right: 1px solid var(--line); background: #fff; }
.project-nav-button { min-height: 42px; padding: 0 13px; border: 0; border-radius: 4px; color: #42453f; background: transparent; font-size: 14px; font-weight: 650; text-align: left; }
.project-nav-button:hover { background: #f2f3f0; }
.project-nav-button.active { color: var(--ink); background: #eee9db; }
.sidebar-foot { margin-top: auto; padding: 18px 13px 4px; }
.role-badge { display: inline-block; padding: 4px 7px; color: #705221; background: var(--accent-soft); font-size: 11px; font-weight: 700; }
.sidebar-foot p { margin: 9px 0 0; color: var(--muted); font-size: 12px; }
.project-main { min-width: 0; padding: 32px clamp(20px, 3.5vw, 58px) 56px; overflow: hidden; }
.project-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 18px; }
.project-tabs { display: flex; gap: 8px; }
.project-filter { min-height: 36px; padding: 8px 12px; border: 0; border-radius: 3px; color: var(--muted); background: transparent; font-size: 13px; font-weight: 650; }
.project-filter.active { color: var(--ink); background: #e8eaec; }
.toolbar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.photo-search, .photo-sort { display: inline-flex; min-height: 36px; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 650; }
.photo-search input { width: 156px; min-height: 36px; padding: 6px 9px; }
.photo-sort select { width: 112px; min-height: 36px; padding: 5px 26px 5px 8px; border-color: var(--line); font-size: 12px; }
.upload-category { display: inline-flex; min-height: 36px; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 650; }
.upload-category select { width: auto; min-height: 36px; padding: 5px 28px 5px 8px; border-color: var(--line); font-size: 12px; }
.upload-button { cursor: pointer; }
.photo-category-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: -3px 0 18px; }
.photo-category-button { min-height: 32px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); background: #fff; font-size: 12px; font-weight: 650; }
.photo-category-button.active { border-color: var(--accent); color: #715424; background: var(--accent-soft); }
.bulk-actions { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; padding: 10px 12px; border: 1px solid #e6dac2; background: #fff9ee; }
.bulk-actions > span { margin-right: auto; color: #765927; font-size: 13px; font-weight: 650; }
.bulk-actions .secondary-button, .bulk-actions .danger-button { min-height: 33px; padding: 6px 10px; font-size: 12px; }
.photo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.photo-card { position: relative; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.photo-card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(183,130,46,.13); }
.photo-thumb { display: block; width: 100%; aspect-ratio: 1.28; object-fit: cover; background: #e9ebea; }
.photo-select { position: absolute; top: 8px; left: 8px; display: grid; width: 20px; height: 20px; place-items: center; border-radius: 3px; background: rgba(255,255,255,.92); }
.photo-select input { width: 15px; min-height: 15px; margin: 0; accent-color: var(--accent); }
.photo-card-body { padding: 10px 10px 11px; }
.photo-name { display: block; overflow: hidden; font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.photo-meta { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-top: 5px; color: var(--muted); font-size: 11px; }
.photo-state { display: inline-block; padding: 2px 5px; border-radius: 2px; color: var(--success); background: #edfbf2; font-size: 10px; font-weight: 700; }
.photo-state.draft { color: #797c77; background: #eff0ef; }
.photo-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 5px; margin-top: 10px; }
.photo-action { min-height: 29px; padding: 5px; border: 1px solid var(--line-strong); border-radius: 3px; color: var(--ink); background: #fff; font-size: 11px; font-weight: 700; }
.photo-action:hover { border-color: var(--ink); }
.photo-action.danger { color: var(--danger); }
.photo-caption { display: -webkit-box; margin: 7px 0 0; overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.45; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.compact-empty { min-height: 340px; }
.project-detail-panel { max-width: 980px; padding: 2px 0; }
.facts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; margin: 0; border-top: 1px solid var(--line); }
.facts-grid > div { min-height: 74px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.facts-grid dt { color: var(--muted); font-size: 12px; }
.facts-grid dd { margin: 8px 0 0; font-size: 14px; line-height: 1.5; }
.share-card { display: grid; grid-template-columns: 1fr auto; gap: 10px; max-width: 700px; padding: 20px; border: 1px solid var(--line); background: #fff; }
.notice-card { padding: 20px; border: 1px solid #e8ddc8; color: #6b542b; background: #fffaf0; font-size: 14px; line-height: 1.6; }
.download-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: -4px 0 14px; }
.download-sync-card { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin: 0 0 18px; }
.download-sync-card strong { color: var(--ink); font-size: 14px; }
.download-sync-card p { flex: 1 1 260px; margin: 0; color: #6b542b; font-size: 12px; line-height: 1.55; }
.download-sync-card .primary-button { margin-left: auto; }

/* Modals */
.modal { width: min(610px, calc(100% - 32px)); max-height: min(780px, calc(100vh - 32px)); padding: 0; border: 0; background: transparent; box-shadow: 0 18px 60px rgba(0,0,0,.22); }
.modal::backdrop { background: rgba(25, 27, 25, .42); }
.modal-panel { display: grid; gap: 17px; max-height: inherit; overflow: auto; padding: 28px; border: 1px solid var(--line); background: #fff; }
.modal-panel.narrow-panel { width: min(470px, 100%); }
.payment-panel { text-align: left; }
.payment-panel .payment-open-link, .payment-panel .secondary-button { width: 100%; }
.event-panel { width: min(720px, 100%); }
.modal-heading, .subheading { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.modal-heading h2, .subheading h3 { margin: 5px 0 0; font-size: 23px; letter-spacing: -.045em; }
.icon-button { display: grid; width: 32px; height: 32px; place-items: center; padding: 0; border: 0; border-radius: 4px; color: var(--muted); background: transparent; font-size: 24px; line-height: 1; }
.icon-button:hover { color: var(--ink); background: #f1f2ef; }
.modal-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; padding-top: 4px; }
.action-spacer { flex: 1; }
.share-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; }
.event-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.event-fields .wide { grid-column: 1 / -1; }
.subheading p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.subheading select { width: 122px; min-height: 36px; padding: 5px 8px; font-size: 12px; }
.invite-method { display: grid; gap: 13px; padding: 18px; border: 1px solid var(--line); background: #fafbfa; }
.invite-method h3 { margin: 0; font-size: 15px; }
.invite-method p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.invite-method .primary-button, .invite-method .secondary-button { justify-self: start; }
.invite-divider { position: relative; display: grid; place-items: center; height: 18px; color: var(--soft); font-size: 12px; }
.invite-divider::before { position: absolute; inset: 50% 0 auto; height: 1px; content: ""; background: var(--line); }
.invite-divider span { position: relative; z-index: 1; padding: 0 10px; background: #fff; }
.photo-edit-preview { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 13px; padding: 12px; border: 1px solid var(--line); background: #fafbfa; }
.photo-edit-preview img { display: block; width: 96px; height: 72px; object-fit: cover; background: #e9ebea; }
.photo-edit-preview strong, .photo-edit-preview small { display: block; }
.photo-edit-preview strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.photo-edit-preview small { margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.photo-edit-form { display: grid; gap: 13px; }
.photo-edit-form h3 { margin: 0; font-size: 15px; }

@media (max-width: 980px) {
  .auth-view { grid-template-columns: 1fr; }
  .auth-copy { min-height: 390px; padding-top: 138px; padding-bottom: 66px; }
  .auth-copy h2 { max-width: 650px; font-size: clamp(38px, 8vw, 60px); }
  .auth-side { padding: 34px 28px 32px; }
  .auth-illustration { top: -42px; height: calc(100% + 42px); }
  .auth-copy-content { transform: translateY(-40px); }
  .auth-panel { margin-bottom: 18px; }
  .auth-footer { max-width: none; }
  .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .auth-brand { top: 24px; left: 24px; }
  .auth-copy { min-height: 440px; align-content: start; padding: 82px 24px 46px; }
  .auth-copy h2 { font-size: 38px; }
  .auth-copy > p:last-child { font-size: 14px; }
  .auth-illustration { top: -24px; height: calc(100% + 24px); }
  .auth-copy-content { transform: none; }
  .auth-side { padding: 24px 16px 28px; }
  .auth-panel { width: 100%; padding: 25px 21px; }
  .topbar, .project-topbar { min-height: 64px; padding: 0 16px; }
  .account-button #accountName, .account-button .account-chevron, .project-topbar-title .eyebrow, .project-topbar-actions .quiet-button, .sync-download-button small { display: none; }
  .account-dropdown { top: calc(100% + 7px); right: -5px; }
  .workspace-hero { display: grid; align-items: start; min-height: 0; padding: 35px 20px 26px; }
  .hero-actions { justify-content: start; }
  .summary-grid { grid-template-columns: 1fr; padding: 18px 20px 0; }
  .summary-card { min-height: 98px; grid-template-columns: 1fr auto; align-items: center; }
  .summary-card strong { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .projects-section, .recycle-section { padding: 30px 20px 0; }
  .section-heading, .panel-heading { align-items: start; }
  .project-card { grid-template-columns: 70px minmax(0, 1fr); grid-template-rows: auto 1fr auto; min-height: 0; gap: 0 12px; padding: 12px; }
  .project-cover { grid-row: 1 / span 3; width: 70px; height: 70px; }
  .project-card-header { grid-column: 2; align-self: start; }
  .project-card-body { grid-column: 2; }
  .project-card-body h3 { margin: 2px 0; font-size: 16px; }
  .project-card-footer { grid-column: 2; grid-row: 3; justify-content: flex-start; gap: 14px; margin-top: 7px; }
  .project-layout { grid-template-columns: 1fr; }
  .project-sidebar { position: sticky; z-index: 8; top: 64px; flex-direction: row; gap: 6px; padding: 9px 12px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .project-nav-button { flex: 0 0 auto; min-height: 34px; padding: 7px 10px; font-size: 12px; }
  .sidebar-foot { display: none; }
  .project-main { padding: 22px 14px 40px; }
  .project-toolbar { align-items: start; flex-direction: column; }
  .toolbar-actions { width: 100%; }
  .toolbar-actions > * { flex: 1; }
  .photo-search, .photo-sort, .upload-category { justify-content: space-between; }
  .photo-search input, .photo-sort select { width: min(100%, 180px); }
  .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .bulk-actions { flex-wrap: wrap; }
  .bulk-actions > span { width: 100%; }
  .facts-grid { grid-template-columns: 1fr; }
  .share-card { grid-template-columns: 1fr; }
  .modal-panel { padding: 22px 18px; }
  .event-fields, .share-row { grid-template-columns: 1fr; }
  .event-fields .wide { grid-column: auto; }
  .project-topbar-actions .text-action { min-height: 34px; padding: 7px 9px; font-size: 12px; }
  .sync-download-button { min-height: 34px; padding: 7px 9px; font-size: 12px; }
  .sync-download-icon { width: 18px; height: 18px; font-size: 15px; }
  .membership-topbar { min-height: 58px; grid-template-columns: 1fr auto 1fr; padding: 0 16px; }
  .membership-back { font-size: 12px; }
  .membership-brand { font-size: 14px; }
  .membership-brand .brand-mark { width: 25px; height: 25px; }
  .membership-topbar-space { width: 78px; }
  .membership-main { width: min(100% - 32px, 560px); padding: 34px 0 184px; }
  .membership-heading h1 { font-size: 40px; }
  .membership-heading > p:last-child { font-size: 13px; }
  .membership-current-summary { display: grid; gap: 20px; margin: 30px 0 37px; padding: 19px; }
  .membership-usage { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .membership-usage > div { padding-left: 10px; }
  .membership-usage dt { font-size: 10px; }
  .membership-usage dd { font-size: 12px; }
  .membership-section-heading { align-items: start; }
  .membership-section-heading > p { max-width: 105px; padding-top: 7px; text-align: right; line-height: 1.45; }
  .membership-plan-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
  .membership-storage-section { margin-top: 42px; }
  .membership-plan-card { min-height: 352px; padding: 20px; }
  .membership-storage-card { min-height: 308px; }
  .membership-checkout { align-items: stretch; flex-direction: column; gap: 11px; padding: 13px 16px max(15px, env(safe-area-inset-bottom)); }
  .membership-checkout p { line-height: 1.45; }
  .membership-purchase { width: 100%; min-width: 0; }
}

@media (max-width: 420px) {
  .auth-copy h2 { font-size: 34px; }
  .photo-grid { grid-template-columns: 1fr 1fr; }
  .photo-card-body { padding: 8px; }
  .photo-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .membership-plan-list { grid-template-columns: 1fr; }
}

@media (min-width: 721px) and (max-width: 1040px) {
  .membership-plan-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}