* { box-sizing:border-box; }
body { margin:0; font-family:Inter,ui-sans-serif,system-ui,sans-serif; color:var(--ink); background:var(--paper); }
button,input,select,textarea { font:inherit; }
button { border:0; border-radius:9px; padding:.65rem .95rem; cursor:pointer; color:white; background:var(--accent); }
button.secondary { color:var(--ink); background:#ebe8e0; }
button.danger { background:var(--danger); }
button:disabled { opacity:.55; cursor:wait; }
input,select,textarea { width:100%; padding:.7rem .8rem; border:1px solid var(--line); border-radius:9px; background:white; }
label { display:grid; gap:.35rem; color:var(--muted); font-size:.9rem; }
.topbar { height:64px; padding:0 max(1rem,calc((100vw - 1180px)/2)); display:flex; align-items:center; justify-content:space-between; background:var(--card); border-bottom:1px solid var(--line); }
.brand { color:var(--ink); text-decoration:none; font-weight:750; display:flex; gap:.65rem; align-items:center; }
.brand-mark { display:grid; place-items:center; width:31px; height:31px; border-radius:9px; color:white; background:var(--accent); }
#root { max-width:1180px; margin:0 auto; padding:28px 18px 60px; }
.loading,.empty { color:var(--muted); padding:2rem; text-align:center; }
.auth { max-width:420px; margin:8vh auto; padding:30px; background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:0 16px 45px #17202a12; }
.auth h1 { margin:0 0 .4rem; }
.auth p { color:var(--muted); margin:0 0 1.5rem; }
.stack { display:grid; gap:1rem; }
.shell { display:grid; grid-template-columns:260px 1fr; gap:20px; }
.sidebar,.panel { background:var(--card); border:1px solid var(--line); border-radius:14px; }
.sidebar { padding:16px; align-self:start; }
.panel { padding:20px; min-width:0; }
.section-title { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:18px; }
.section-title h1,.section-title h2 { margin:0; }
.device { display:grid; gap:4px; width:100%; text-align:left; padding:10px; margin:5px 0; color:var(--ink); background:transparent; border:1px solid transparent; }
.device.active { border-color:#b9c8f0; background:#edf2ff; }
.status { font-size:.78rem; color:var(--muted); }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; background:#9ca3af; }
.dot.online { background:#16a34a; }
.tabs { display:flex; gap:8px; margin-bottom:18px; border-bottom:1px solid var(--line); }
.tab { color:var(--muted); background:transparent; border-radius:0; border-bottom:2px solid transparent; }
.tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:end; margin-bottom:16px; }
.toolbar label { flex:1; min-width:180px; }
.cloud-head { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:16px; }
.cloud-head h2 { margin:0; }
.private-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; }
.private-tile { min-height:180px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:8px; padding:24px; color:var(--ink); text-align:left; background:#f8f7f2; border:1px solid var(--line); border-radius:16px; }
.private-tile:hover { border-color:#9cb2ec; background:#f0f4ff; }
.private-tile strong { font-size:1.25rem; }
.private-tile span:last-child { color:var(--muted); }
.private-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:13px; font-size:1rem; font-weight:800; color:var(--accent); background:#e8eefc; }
.private-timeline-tile { grid-column:1/-1; }
.private-media-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:14px; margin-top:18px; }
.private-media-card { position:relative; min-width:0; background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.private-media-open { width:100%; min-height:150px; border:0; border-radius:0; background:linear-gradient(145deg,#e8eef8,#f5f1fb); color:inherit; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:9px; padding:18px; text-align:left; }
.private-media-open span { font-size:32px; opacity:.72; }
.private-media-open strong { width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.favourite-button { position:absolute; right:8px; top:8px; min-width:42px; padding:7px 10px; font-size:20px; }
.media-dialog { width:min(94vw,1000px); height:min(90vh,780px); padding:12px; border:0; border-radius:20px; background:#101114; color:white; }
.media-dialog::backdrop { background:rgba(0,0,0,.78); }
.media-dialog #media-stage { height:calc(100% - 52px); display:grid; place-items:center; }
.media-dialog img,.media-dialog video { max-width:100%; max-height:100%; object-fit:contain; }
.record-list { display:grid; gap:10px; margin-top:18px; }
.record-card { display:flex; flex-direction:column; align-items:flex-start; gap:5px; width:100%; padding:18px 20px; text-align:left; background:var(--card); color:inherit; border:1px solid var(--line); border-radius:16px; }
.record-card span { color:var(--muted); max-width:70ch; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.record-editor { max-width:760px; }
.rich-toolbar,.album-strip,.media-card-actions,.attachment-chips { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.rich-toolbar { padding:8px; border:1px solid var(--line); border-radius:14px 14px 0 0; background:var(--card); }
.rich-toolbar button { padding:.45rem .7rem; }
.rich-editor { min-height:260px; border:1px solid var(--line); border-top:0; border-radius:0 0 14px 14px; padding:16px; background:var(--card); overflow-wrap:anywhere; }
.rich-editor:focus { outline:2px solid var(--accent); outline-offset:1px; }
.rich-editor [data-block="bulleted"]::before { content:'• '; }
.rich-editor [data-block="numbered"] { counter-increment:rich-list; }
.rich-editor [data-block="numbered"]::before { content:counter(rich-list) '. '; }
.album-strip { margin:12px 0 18px; overflow:auto; flex-wrap:nowrap; }
.album-strip button { white-space:nowrap; background:var(--card); color:inherit; border:1px solid var(--line); }
.album-strip button.active { background:var(--accent); color:white; }
.private-media-open img { width:100%; height:120px; object-fit:cover; border-radius:10px; background:var(--line); }
.video-placeholder { width:100%; height:120px; display:grid; place-items:center; border-radius:10px; background:#202530; color:white; font-weight:700; }
.media-card-actions { padding:8px; }
.attachment-chips span { border:1px solid var(--line); border-radius:999px; padding:5px 8px; }
.weekday-picker { display:flex; flex-wrap:wrap; gap:10px; }
.memory-line { position:relative; margin:24px 0 0 90px; border-left:2px solid #9eb3d8; padding-left:28px; }
.memory-line article { position:relative; display:grid; gap:4px; margin:0 0 22px; }
.memory-line article::before { content:''; position:absolute; left:-36px; top:5px; width:14px; height:14px; border-radius:50%; background:#506d9f; border:3px solid white; box-shadow:0 0 0 1px #506d9f; }
.memory-line time { position:absolute; right:calc(100% + 48px); top:1px; width:75px; text-align:right; color:var(--muted); font-size:13px; }
.memory-line article div { display:flex; flex-direction:column; gap:3px; }
.memory-line article span { color:var(--muted); }
.journal-list { display:grid; gap:12px; }
.journal-card { padding:16px; background:#faf9f5; border:1px solid var(--line); border-radius:13px; }
.journal-card h3 { margin:.35rem 0; }
.journal-card p { margin:.35rem 0 1rem; color:var(--muted); white-space:pre-wrap; }
.journal-card .actions { text-align:right; }
.journal-meta { color:var(--muted); font-size:.85rem; }
.journal-editor-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.journal-editor-head h2 { margin:0; }
.journal-editor { display:grid; gap:16px; }
.journal-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.journal-editor textarea { resize:vertical; line-height:1.55; }
.contact-list,.agenda { display:grid; gap:10px; }
.contact-card,.agenda-card { display:flex; align-items:center; gap:14px; width:100%; padding:14px; color:var(--ink); text-align:left; background:#faf9f5; border:1px solid var(--line); }
.contact-card span:last-child,.agenda-card { display:grid; gap:4px; }
.contact-card small,.agenda-card span { color:var(--muted); }
.avatar { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; border-radius:50%; color:white; font-weight:700; background:var(--accent); }
.form-actions { display:flex; justify-content:flex-end; gap:10px; }
.check { display:flex; grid:unset; align-items:center; gap:8px; color:var(--ink); }
.check input { width:auto; }
.calendar-toolbar { display:grid; grid-template-columns:auto minmax(150px,1fr) auto auto; gap:8px; margin-bottom:14px; }
.calendar-week,.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.calendar-week span { padding:6px; color:var(--muted); text-align:center; font-size:.78rem; }
.calendar-day { min-height:68px; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; color:var(--ink); background:#faf9f5; border:1px solid var(--line); }
.calendar-day span { color:var(--accent); font-size:.75rem; }
.calendar-day.selected { color:white; background:var(--accent); }
.calendar-day.selected span { color:white; }
.upload-button { flex:0 0 auto !important; min-width:0 !important; display:inline-block; padding:.65rem .95rem; border-radius:9px; color:white; background:var(--accent); cursor:pointer; }
.upload-button input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
#cloud-status { min-height:1.5rem; color:var(--muted); }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:12px; }
.breadcrumbs button { background:transparent; color:var(--accent); padding:.3rem; }
table { width:100%; border-collapse:collapse; }
th,td { padding:11px 9px; text-align:left; border-bottom:1px solid var(--line); }
th { color:var(--muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; }
td.actions { text-align:right; white-space:nowrap; }
td.actions button { padding:.4rem .65rem; }
.file-link { border:0; background:transparent; color:var(--ink); padding:0; text-align:left; }
.gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.media { overflow:hidden; background:#eeeae1; border-radius:12px; border:1px solid var(--line); }
.media img { width:100%; aspect-ratio:1; object-fit:cover; display:block; }
.media .caption { padding:9px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-users { margin-bottom:16px; }
.muted { color:var(--muted); }
.error { color:var(--danger); }
#toast { position:fixed; right:18px; bottom:18px; max-width:380px; padding:12px 16px; border-radius:10px; background:#17202a; color:white; opacity:0; transform:translateY(8px); transition:.18s; pointer-events:none; }
#toast.show { opacity:1; transform:none; }
@media (max-width:760px) { .shell { grid-template-columns:1fr; } .sidebar { position:static; } th:nth-child(3),td:nth-child(3) { display:none; } .journal-fields { grid-template-columns:1fr; } .calendar-toolbar { grid-template-columns:auto 1fr auto; } #event-new { grid-column:1/-1; } .calendar-day { min-height:52px; padding:.45rem; } .private-timeline-tile{grid-column:auto}.memory-line{margin-left:28px}.memory-line time{position:static;width:auto;text-align:left}.private-media-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
.collection-picker{border:1px solid var(--line);border-radius:16px;padding:14px;display:grid;gap:8px;max-height:360px;overflow:auto}.collection-picker legend{font-weight:700;padding:0 6px}.collection-picker small{color:var(--muted);margin-left:auto}

/* Production UI foundation */
body { line-height:1.45; }
button,input,select,textarea,.rich-editor { transition:border-color .16s,box-shadow .16s,background-color .16s,transform .16s; }
button:hover { transform:translateY(-1px); }
button:active { transform:none; }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[contenteditable]:focus-visible { outline:3px solid color-mix(in srgb,var(--accent) 35%,transparent); outline-offset:2px; }
.sidebar,.panel { border-radius:var(--radius); box-shadow:0 1px 2px #1720330a; }
.panel { padding:clamp(18px,3vw,30px); }
.tool-section { margin-top:28px; }
.tool-section>h3 { margin:0 0 10px; color:var(--muted); font-size:.85rem; font-weight:750; letter-spacing:.03em; }
.private-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.private-grid.compact { grid-template-columns:repeat(3,minmax(0,1fr)); }
.private-tile { min-height:126px; justify-content:flex-start; padding:18px; border-radius:18px; background:var(--card); }
.private-tile.featured { background:linear-gradient(145deg,var(--accent-soft),#f8faff); border-color:#cdd8ec; }
.private-tile strong { font-size:1.05rem; }
.private-tile:hover { border-color:var(--accent); background:#f4f7fc; box-shadow:0 8px 24px #263b6612; }
.private-timeline-tile { grid-column:auto; }
.admin-context { align-items:center; padding:14px 16px; border:1px solid #cbd7ee; border-radius:14px; background:#f0f4fb; }
.admin-context>div { display:grid; gap:2px; flex:1; min-width:210px; }
.admin-context>div span { color:var(--muted); font-size:.85rem; }
.empty { margin:18px 0; border:1px dashed var(--line); border-radius:16px; background:#fafbfc; }
th { text-transform:none; letter-spacing:0; }
#toast { border-radius:12px; box-shadow:0 12px 30px #17203330; }
@media (max-width:760px) {
  #root { padding:18px 12px 44px; }
  .topbar { height:58px; }
  .panel { padding:18px 14px; }
  .cloud-head { align-items:flex-start; flex-direction:column; }
  .private-grid,.private-grid.compact { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .private-tile { min-height:118px; padding:15px; }
  .private-tile span:last-child { display:none; }
  .admin-context { align-items:stretch; }
  table thead { display:none; }
  table,table tbody,table tr,table td { display:block; width:100%; }
  table tr { padding:12px 0; border-bottom:1px solid var(--line); }
  table td { border:0; padding:4px 2px; }
  td.actions { text-align:left; white-space:normal; padding-top:9px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
.auth-mark,.confirmation-icon { display:grid; place-items:center; width:54px; height:54px; margin-bottom:18px; border-radius:17px; color:white; background:var(--accent); font-size:1.4rem; font-weight:800; }
.confirmation-icon { border-radius:50%; background:#e7f5ec; color:#19743b; }
.google-button { width:100%; display:flex; justify-content:center; align-items:center; gap:12px; color:var(--ink); background:white; border:1px solid var(--line); }
.google-button span { color:#4285f4; font-size:1.15rem; font-weight:800; }
.auth-help { margin-top:22px!important; padding-top:18px; border-top:1px solid var(--line); font-size:.9rem; }
.button-link { display:inline-block; padding:.7rem 1rem; border-radius:9px; color:white; background:var(--accent); text-decoration:none; text-align:center; }
.connection-summary { display:grid; grid-template-columns:auto 1fr; gap:8px 18px; margin:18px 0 22px; padding:16px; border-radius:13px; background:#f4f6fa; }
.connection-summary span { color:var(--muted); }
.success-card { text-align:left; }
.admin-fallback{margin-top:16px;color:var(--muted)}.admin-fallback summary{cursor:pointer;font-size:.88rem}.admin-fallback form{margin-top:14px}

/* Owner operations console */
.admin-shell{display:grid;grid-template-columns:220px minmax(0,1fr);gap:22px;align-items:start}.admin-nav{position:sticky;top:86px;padding:18px;border:1px solid var(--line);border-radius:18px;background:#263b5a;color:white}.admin-nav>div{display:grid;gap:2px;margin:2px 8px 22px}.admin-nav>div span{color:#bac6d8;font-size:.82rem}.admin-nav nav{display:grid;gap:4px}.admin-nav button{width:100%;text-align:left;background:transparent;color:#dce4f0}.admin-nav button.active{background:#fff;color:#21334f}.admin-main{min-width:0}.admin-heading,.account-header{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:24px}.admin-heading h1,.account-header h1{margin:0}.admin-heading p,.account-header p{margin:.35rem 0 0;color:var(--muted)}.metric-strip{display:grid;grid-template-columns:repeat(5,1fr);margin-bottom:24px;border:1px solid var(--line);border-radius:18px;background:white;overflow:hidden}.metric-strip article{display:grid;gap:3px;padding:20px;border-right:1px solid var(--line)}.metric-strip article:last-child{border:0}.metric-strip strong{font-size:1.55rem}.metric-strip span{color:var(--muted);font-size:.82rem}.metric-strip .metric-alert strong{color:var(--danger)}.admin-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.admin-columns section,.storage-detail{padding:20px;border:1px solid var(--line);border-radius:16px;background:white}.admin-columns h2,.storage-detail h2{margin:0 0 14px;font-size:1rem}.facts{display:grid;gap:10px;margin:0}.facts div{display:flex;justify-content:space-between;gap:16px}.facts dt{color:var(--muted)}.facts dd{margin:0;font-weight:650;text-align:right}.filter-row,.inline-form{display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin-bottom:18px}.filter-row label,.inline-form label{min-width:160px;flex:1}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:16px;background:white}.admin-table tr[data-user]{cursor:pointer}.admin-table tr[data-user]:hover,.admin-table tr[data-user]:focus{background:#f0f4fb;outline:none}.admin-table td strong,.admin-table td small{display:block}.admin-table td small{max-width:260px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}.badge{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;background:#edf0f4;color:#465467;font-size:.75rem;font-weight:700;text-transform:capitalize;white-space:nowrap}.badge.active,.badge.online,.badge.completed,.badge.claimed,.badge.valid{background:#e5f4ea;color:#17623a}.badge.disabled,.badge.failed,.badge.invalid,.badge.expired{background:#fce8e6;color:#9c241d}.badge.pending,.badge.delivered,.badge.running,.badge.awaiting_integrity,.badge.awaiting_account{background:#fff1d6;color:#815500}.usage{width:130px;height:7px;margin-bottom:5px;border-radius:8px;background:#e7eaf0;overflow:hidden}.usage div{height:100%;background:var(--accent)}.pager,.action-bar,.workspace-actions{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-top:16px}.pager span{margin-right:auto;color:var(--muted)}.back-link{margin-bottom:18px;padding:0;background:transparent;color:var(--accent)}.detail-tabs{display:flex;gap:4px;margin-bottom:20px;border-bottom:1px solid var(--line);overflow:auto}.detail-tabs button{border-radius:8px 8px 0 0;background:transparent;color:var(--muted);white-space:nowrap}.detail-tabs button.active{color:var(--accent);box-shadow:inset 0 -2px var(--accent)}.device-list{display:grid;gap:10px}.device-list article{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;border:1px solid var(--line);border-radius:14px;background:white}.device-list article>div:first-child{display:grid;gap:5px}.device-list small{color:var(--muted)}.inline-form{margin-top:22px;padding:18px;border:1px solid var(--line);border-radius:16px;background:white}.storage-detail{max-width:620px}.storage-detail>.usage{width:100%;height:10px}.admin-main>h2{margin-top:28px;font-size:1rem}
@media(max-width:900px){.admin-shell{grid-template-columns:1fr}.admin-nav{position:static}.admin-nav>div{margin-bottom:12px}.admin-nav nav{display:flex;overflow:auto}.admin-nav button{width:auto;white-space:nowrap}.metric-strip{grid-template-columns:repeat(2,1fr)}.metric-strip article{border-bottom:1px solid var(--line)}.admin-columns{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.metric-strip,.admin-columns{grid-template-columns:1fr}.metric-strip article{border-right:0}.admin-heading,.account-header,.device-list article{align-items:stretch;flex-direction:column}.filter-row,.inline-form{display:grid}.usage{width:100%}}