*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* ---- La Martinière — « Sels & Soleil » ---- */
  --terracotta-700:#9E3F27;--terracotta-600:#BC5132;--terracotta-500:#D96A47;--terracotta-100:#FBE6DC;--terracotta-050:#FDF3EE;
  --lin-900:#2B2620;--lin-800:#3E382F;--lin-700:#5B5346;--lin-600:#756B5C;--lin-500:#908775;--lin-300:#DAD2C4;--lin-200:#E9E2D6;--lin-100:#F1EAE0;--lin-050:#FBF8F1;
  --creme-300:#EFE4D3;--creme-200:#F6EDDD;--creme-100:#FBF4E8;--creme-050:#FDFAF3;
  --prune-700:#5E3A68;--prune-600:#7B4E86;--prune-100:#F0E7F2;
  --sauge-700:#5E7347;--sauge-600:#7C9460;--sauge-100:#ECF1E2;
  --dore-700:#B5811E;--dore-600:#DCA12A;--dore-100:#FAEFCF;
  --paon-700:#215965;--paon-600:#2F7E8C;--paon-100:#E0EFF1;
  --brique-700:#97301F;--brique-600:#B23A2D;--brique-100:#F7E2DD;

  --text-strong:var(--lin-900);--text-body:var(--lin-800);--text-muted:var(--lin-600);--text-subtle:var(--lin-500);
  --surface-page:var(--creme-050);--surface-card:#FFFFFF;--surface-sunken:var(--lin-100);--surface-hover:var(--lin-050);
  --border-subtle:var(--lin-200);--border-default:var(--lin-300);
  --action-primary:var(--terracotta-500);--action-primary-hover:var(--terracotta-600);--action-primary-soft:var(--terracotta-100);
  --status-success:var(--sauge-600);--status-success-soft:var(--sauge-100);
  --status-warning:var(--dore-600);--status-warning-soft:var(--dore-100);
  --status-danger:var(--brique-600);--status-danger-soft:var(--brique-100);
  --status-info:var(--paon-600);--status-info-soft:var(--paon-100);

  --font-d:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif;
  --font-b:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-m:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --r:16px;--rs:8px;--rpill:999px;
  --sh:0 4px 12px rgba(16,39,51,.08),0 2px 4px rgba(16,39,51,.05);
  --sh-s:0 1px 3px rgba(16,39,51,.07),0 1px 2px rgba(16,39,51,.05);
  --sh-lg:0 12px 28px rgba(16,39,51,.10),0 4px 10px rgba(16,39,51,.05);
  --ring-card:inset 0 0 0 1px rgba(16,39,51,.04);
  --nav:60px;
}
html,body{max-width:100%;overflow-x:clip}
body{font-family:var(--font-b);background:var(--surface-page);color:var(--text-strong);min-height:100vh;font-size:15px;line-height:1.6}

/* LOADING */
#loadingOverlay{position:fixed;inset:0;background:rgba(43,38,32,.55);z-index:2000;display:flex;align-items:center;justify-content:center}
#loadingOverlay.hidden{display:none}
.spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* TOAST */
#toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(80px);z-index:3000;padding:12px 20px;border-radius:var(--rpill);font-size:13px;font-weight:500;opacity:0;transition:all .3s;white-space:nowrap;pointer-events:none;box-shadow:var(--sh-lg)}
#toast.show{transform:translateX(-50%) translateY(0);opacity:1}
#toast.success{background:var(--status-success);color:#fff}
#toast.error{background:var(--status-danger);color:#fff}
#toast.info{background:var(--status-info);color:#fff}

/* AUTH */
.auth-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--surface-page)}
.auth-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--r);padding:24px;width:100%;max-width:420px;box-shadow:var(--sh)}
.auth-title-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:4px}
.auth-icon{width:32px;height:32px;flex-shrink:0}
.auth-title{font-family:var(--font-d);font-weight:700;letter-spacing:-.02em;font-size:22px;color:var(--text-strong)}
.auth-sub{font-size:13px;color:var(--text-muted);text-align:center;margin-bottom:18px}
.auth-error{background:var(--status-danger-soft);border:1px solid rgba(178,58,45,.3);color:var(--brique-700);padding:10px 14px;border-radius:var(--rs);font-size:13px;margin-bottom:16px;display:none}
.auth-error.visible{display:block}
.form-group{margin-bottom:14px}
.form-label{display:block;font-size:13px;font-weight:500;color:var(--text-body);margin-bottom:5px}
.form-input{width:100%;border:1px solid var(--border-default);border-radius:var(--rs);padding:10px 12px;font-size:15px;font-family:var(--font-b);color:var(--text-strong);background:var(--surface-page);outline:none;transition:border-color .15s}
.form-input:focus{border-color:var(--action-primary);box-shadow:0 0 0 3px var(--terracotta-100)}
.btn-primary{width:100%;padding:12px;background:var(--text-strong);color:var(--creme-050);border:none;border-radius:var(--rs);font-size:15px;font-weight:600;font-family:var(--font-b);cursor:pointer;transition:opacity .15s;margin-top:4px}
.btn-primary:hover{opacity:.85}
.btn-primary:disabled{opacity:.5;cursor:not-allowed}
.auth-switch{text-align:center;margin-top:16px;font-size:13px;color:var(--text-muted)}

/* HEADER */
header{background:var(--lin-100);position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(16,39,51,.10);border-bottom:1px solid var(--border-default);padding-top:env(safe-area-inset-top);display:none}
header.visible{display:block}
.header-inner{max-width:960px;margin:0 auto;padding:8px 16px;display:flex;align-items:center;gap:0}
.btn-hamburger{background:none;border:none;cursor:pointer;color:var(--text-strong);padding:8px;display:flex;flex-direction:column;gap:5px;flex-shrink:0;margin-right:8px}
.btn-hamburger span{display:block;width:22px;height:2px;background:currentColor;border-radius:1px;transition:all .2s}
.header-logo{flex:1;display:flex;justify-content:center;align-items:center}
.header-logo img{height:40px;object-fit:contain;max-width:180px;display:block}
.header-user{flex-shrink:0;display:flex;align-items:center;gap:6px}
.header-user-name{font-size:13px;font-weight:500;color:var(--text-body)}
.role-pill{display:inline-block;padding:3px 10px;border-radius:var(--rpill);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.role-admin{background:var(--lin-900);color:var(--creme-050)}
.role-utilisateur{background:var(--action-primary);color:#fff}

/* HAMBURGER MENU */
.hmenu-overlay{display:none;position:fixed;inset:0;background:rgba(16,39,51,.45);z-index:300}
.hmenu-overlay.open{display:block}
.hmenu{position:fixed;top:0;left:0;bottom:0;width:280px;background:var(--surface-card);z-index:301;transform:translateX(-100%);transition:transform .25s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow-y:auto;padding-bottom:env(safe-area-inset-bottom)}
.hmenu.open{transform:translateX(0)}
.hmenu-header{padding:20px 16px 16px;border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;gap:12px}
.hmenu-header-info{flex:1}
.hmenu-header-name{font-size:15px;font-weight:600;color:var(--text-strong)}
.hmenu-header-role{font-size:12px;color:var(--text-muted)}
.hmenu-section{padding:12px 0}
.hmenu-section-label{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;padding:4px 16px 8px}
.hmenu-item{display:flex;align-items:center;gap:12px;padding:12px 16px;background:none;border:none;width:100%;text-align:left;cursor:pointer;font-family:var(--font-b);font-size:14px;color:var(--text-strong);transition:background .12s}
.hmenu-item:active,.hmenu-item:hover{background:var(--surface-hover)}
.hmenu-item svg{width:20px;height:20px;stroke-width:1.75;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;color:var(--text-muted)}
.hmenu-emoji{font-size:20px;width:20px;text-align:center;flex-shrink:0}
.hmenu-item.danger{color:var(--status-danger)}
.hmenu-item.danger svg{color:var(--status-danger)}
.hmenu-divider{height:1px;background:var(--border-subtle);margin:4px 16px}
.hmenu-version{padding:12px 16px;font-family:var(--font-m);font-size:11px;color:var(--text-subtle);margin-top:auto}

/* MAIN */
#app{display:none;padding-bottom:calc(var(--nav) + 16px)}
#app.visible{display:block}
.page{display:none}
.page.active{display:block}
.page-content{max-width:960px;margin:0 auto;padding:20px 16px}

/* BOTTOM NAV */
.bnav{position:fixed;bottom:0;left:0;right:0;height:var(--nav);background:var(--surface-card);border-top:1px solid var(--border-subtle);display:none;z-index:100;padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -2px 12px rgba(16,39,51,.08)}
.bnav.visible{display:flex}
.nbtn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:none;border:none;cursor:pointer;padding:6px 4px;color:var(--text-muted);font-size:10px;font-family:var(--font-b);font-weight:500;transition:color .15s;-webkit-tap-highlight-color:transparent}
.nbtn.active{color:var(--action-primary)}
.nbtn svg{width:22px !important;height:22px !important;min-width:22px;min-height:22px;stroke-width:1.75;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;display:block}
.nbtn-exit{color:var(--status-danger)}
.nbtn-exit svg{stroke:var(--status-danger)}

/* FAB */
.fab{position:fixed;bottom:calc(var(--nav) + 16px);right:16px;width:52px;height:52px;border-radius:50%;background:var(--action-primary);color:#fff;border:none;cursor:pointer;font-size:26px;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-lg);transition:transform .12s;z-index:90}
.fab:active{transform:scale(.92)}
.fab.hidden{display:none}

/* HOME BANNER */
.home-banner{background:var(--creme-200);border-radius:var(--r);padding:16px 20px;margin-bottom:20px;overflow:hidden}
.home-banner-title-row{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.home-banner-icon{width:32px;height:32px;flex-shrink:0}
.home-banner h1{font-family:var(--font-d);font-weight:700;letter-spacing:-.02em;font-size:22px;color:var(--text-strong)}
.home-banner p{font-size:13px;color:var(--text-muted)}

/* SECTION GRID */
.sec-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.sec-tile{border-radius:var(--r);padding:16px 14px;cursor:pointer;border:none;text-align:left;transition:transform .12s,box-shadow .12s;box-shadow:var(--sh-s)}
.sec-tile:active{transform:scale(.97)}
.tile-icon{font-size:22px;margin-bottom:8px}
.tile-title{font-size:13px;font-weight:600;margin-bottom:2px}
.tile-count{font-family:var(--font-m);font-size:11px;opacity:.8}
.slabel{font-size:11px;font-weight:600;color:var(--text-muted);margin:16px 0 8px;text-transform:uppercase;letter-spacing:.08em}

/* QUICK ADD */
.quick-add{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px}
.qa-btn{border-radius:var(--rs);padding:12px;border:1px solid var(--border-default);background:var(--surface-card);cursor:pointer;text-align:left;font-size:13px;color:var(--text-muted);font-family:var(--font-b);box-shadow:var(--sh-s)}
.qa-btn strong{display:block;font-size:14px;color:var(--text-strong);margin-bottom:2px}

/* ENTRIES */
.section-hdr{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.section-hdr-dot{width:10px;height:10px;border-radius:50%}
.section-hdr-title{font-family:var(--font-d);font-weight:700;letter-spacing:-.02em;font-size:20px;color:var(--text-strong)}
.section-hdr-count{margin-left:auto;font-family:var(--font-m);font-size:12px;color:var(--text-muted);background:var(--surface-sunken);padding:3px 10px;border-radius:var(--rpill)}
.section-hdr-pdf{font-size:12px;padding:5px 10px;border-radius:var(--rpill);border:1px solid var(--border-default);background:transparent;color:var(--text-muted);cursor:pointer;font-family:var(--font-b)}

.entries-list{display:flex;flex-direction:column;gap:10px}
.ecard{background:var(--surface-card);border-radius:var(--r);padding:14px;position:relative;box-shadow:var(--sh-s),var(--ring-card)}
.ecard-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}
.ecard-photos img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--rs);cursor:pointer}
.card-tag{display:inline-block;font-size:11px;font-weight:600;padding:3px 9px;border-radius:var(--rpill);margin-bottom:8px}
.ecard h3{font-family:var(--font-d);font-weight:700;font-size:15px;color:var(--text-strong);margin-bottom:4px}
.ecard p.edesc{font-size:13px;color:var(--text-muted);line-height:1.5}
.ecard .meta{margin-top:10px;font-size:11px;color:var(--text-muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.edel{position:absolute;top:10px;right:10px;background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:18px;padding:4px;line-height:1}
.edel:active{color:var(--status-danger)}
.stars-disp{color:var(--dore-600);font-size:13px}
.author-tag{font-weight:500;color:var(--text-body)}

/* COMMENTS */
.ecard-comments-btn{margin-top:10px;display:inline-flex;align-items:center;gap:5px;background:var(--surface-sunken);border:none;border-radius:var(--rpill);padding:5px 11px;font-size:12px;color:var(--text-body);font-family:var(--font-b);font-weight:500;cursor:pointer}
.comment-item{padding:10px 0;border-bottom:1px solid var(--border-subtle)}
.comment-item:last-child{border-bottom:none}
.comment-head{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.comment-author{font-size:13px;font-weight:600;color:var(--text-strong)}
.comment-date{font-size:11px;color:var(--text-subtle)}
.comment-del{margin-left:auto;background:none;border:none;color:var(--text-subtle);cursor:pointer;font-size:14px}
.comment-text{font-size:13px;color:var(--text-body);line-height:1.5}
.comment-empty{text-align:center;padding:24px 12px;color:var(--text-muted);font-size:13px}
.comment-input-row{display:flex;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border-subtle)}
.comment-input-row input{flex:1}

/* RECIPE CARDS */
.rcard{background:var(--surface-card);border-radius:var(--r);padding:14px;position:relative;margin-bottom:10px;box-shadow:var(--sh-s),var(--ring-card)}
.rcard-header{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}
.rcard-img{width:64px;height:64px;border-radius:var(--rs);flex-shrink:0;background:var(--surface-sunken);display:flex;align-items:center;justify-content:center;font-size:28px;overflow:hidden}
.rcard-img img{width:100%;height:100%;object-fit:cover;cursor:pointer}
.rcard-info h3{font-family:var(--font-d);font-weight:700;font-size:15px;color:var(--text-strong);margin-bottom:2px}
.rcard-info p{font-size:12px;color:var(--text-muted)}
.rating-row{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.rtag{font-size:11px;padding:3px 8px;border-radius:var(--rpill);font-weight:600}
.diff-facile{background:var(--sauge-100);color:var(--sauge-700)}
.diff-moyen{background:var(--dore-100);color:var(--dore-700)}
.diff-difficile{background:var(--brique-100);color:var(--brique-700)}
.pbar{height:4px;background:var(--surface-sunken);border-radius:2px;overflow:hidden;margin-top:8px}
.pbar-fill{height:100%;background:var(--dore-600);border-radius:2px}
.notes-row{font-size:12px;color:var(--text-muted);margin-top:6px;line-height:1.5}

/* EMPTY */
.empty{text-align:center;padding:48px 20px;color:var(--text-muted)}
.empty-icon{font-size:40px;margin-bottom:12px}
.empty p{font-size:14px;line-height:1.6}

/* SEARCH */
.search-toolbar{max-width:960px;margin:0 auto;padding:20px 16px 12px}
.sbar{display:flex;align-items:center;gap:8px;background:var(--surface-sunken);border-radius:var(--rs);padding:10px 12px;border:1px solid var(--border-subtle)}
.sbar svg{width:18px;height:18px;stroke:var(--text-muted);fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.sbar input{flex:1;border:none;background:none;font-size:15px;color:var(--text-strong);outline:none;font-family:var(--font-b)}
.search-layout{display:flex;max-width:960px;margin:0 auto;align-items:stretch}
.search-rail{flex:none;width:84px;display:flex;flex-direction:column;background:var(--creme-100);border-radius:var(--rs) 0 0 var(--rs);overflow:hidden}
.rail-item{width:100%;border:none;background:transparent;cursor:pointer;padding:12px 4px;display:flex;flex-direction:column;align-items:center;gap:5px;font-family:var(--font-b);border-left:3px solid transparent}
.rail-item .rail-dot{width:18px;height:18px;border-radius:50%;background:var(--rail-color,var(--action-primary));flex:none}
.rail-item.active{background:var(--rail-color,var(--action-primary));border-left-color:var(--rail-color,var(--action-primary))}
.rail-item.active .rail-dot{background:rgba(255,255,255,.35);border:2px solid #fff}
.rail-item .rail-label{font-size:10.5px;font-weight:600;color:var(--text-body);line-height:1.15;text-align:center}
.rail-item.active .rail-label{color:#fff}
.rail-item .rail-count{font-family:var(--font-m);font-size:10px;color:var(--text-subtle)}
.rail-item.active .rail-count{color:rgba(255,255,255,.9)}
.search-body{flex:1;min-width:0;padding:0 0 16px 14px}

/* STATS */
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.stat{background:var(--surface-card);border-radius:var(--r);padding:16px;text-align:center;box-shadow:var(--sh-s),var(--ring-card)}
.stat-n{font-family:var(--font-m);font-weight:500;font-size:28px;color:var(--text-strong)}
.stat-l{font-size:12px;color:var(--text-muted);margin-top:2px}
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.bar-label{font-size:12px;color:var(--text-muted);width:120px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{flex:1;height:6px;background:var(--surface-sunken);border-radius:3px;overflow:hidden}
.bar-fill{height:100%;border-radius:3px;transition:width .4s}
.bar-cnt{font-family:var(--font-m);font-size:12px;color:var(--text-muted);width:20px;text-align:right;flex-shrink:0}

/* ADMIN */
.admin-card{background:var(--surface-card);border-radius:var(--r);padding:16px;margin-bottom:12px;box-shadow:var(--sh-s),var(--ring-card)}
.admin-card h3{font-size:15px;font-weight:600;margin-bottom:4px}
.admin-card p{font-size:13px;color:var(--text-muted)}
.admin-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.btn-sm{font-size:12px;padding:6px 12px;border-radius:var(--rpill);border:1px solid var(--border-default);background:var(--surface-page);color:var(--text-body);cursor:pointer;font-family:var(--font-b)}
.btn-sm:hover{background:var(--surface-hover)}
.btn-sm.danger{border-color:rgba(178,58,45,.3);color:var(--status-danger)}
.btn-sm.primary{background:var(--text-strong);color:var(--creme-050);border-color:var(--text-strong)}

/* MODAL */
.mo{display:none;position:fixed;inset:0;background:rgba(16,39,51,.45);z-index:200;align-items:flex-end;backdrop-filter:blur(6px)}
.mo.open{display:flex}
.modal{background:var(--surface-card);border-radius:22px 22px 0 0;width:100%;max-height:92vh;overflow-y:auto;padding:20px 16px calc(env(safe-area-inset-bottom) + 20px)}
.modal-handle{width:36px;height:4px;background:var(--border-default);border-radius:2px;margin:0 auto 16px}
.modal h2{font-family:var(--font-d);font-weight:700;letter-spacing:-.02em;font-size:20px;margin-bottom:16px;color:var(--text-strong)}
.modal label{display:block;font-size:13px;font-weight:500;color:var(--text-body);margin-bottom:5px;margin-top:14px}
.modal input,.modal textarea,.modal select{width:100%;border:1px solid var(--border-default);border-radius:var(--rs);padding:10px 12px;font-size:15px;font-family:var(--font-b);color:var(--text-strong);background:var(--surface-page);outline:none}
.modal input:focus,.modal textarea:focus,.modal select:focus{border-color:var(--action-primary);box-shadow:0 0 0 3px var(--terracotta-100)}
.modal textarea{resize:vertical;min-height:80px}
.star-picker{display:flex;gap:8px;margin-top:4px}
.sbtn{font-size:22px;background:none;border:none;cursor:pointer;opacity:.3;transition:opacity .1s;padding:4px}
.sbtn.on{opacity:1}
.btn-row{display:flex;gap:10px;margin-top:20px}
.btn-save{flex:1;padding:12px;background:var(--action-primary);color:#fff;border:none;border-radius:var(--rs);font-size:15px;font-weight:600;cursor:pointer;font-family:var(--font-b);transition:background .15s}
.btn-save:hover{background:var(--action-primary-hover)}
.btn-cancel{padding:12px 18px;background:var(--surface-sunken);color:var(--text-strong);border:none;border-radius:var(--rs);font-size:15px;cursor:pointer;font-family:var(--font-b)}

/* PHOTO GRID in modal */
.photo-grid-modal{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px}
.photo-thumb{position:relative;width:100%;padding-top:100%;border-radius:var(--rs);overflow:hidden;background:var(--surface-sunken)}
.photo-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;cursor:pointer}
.photo-thumb .del-ph{position:absolute;top:4px;right:4px;width:22px;height:22px;background:rgba(16,39,51,.65);color:#fff;border:none;border-radius:50%;cursor:pointer;font-size:14px;line-height:22px;text-align:center;padding:0}
.photo-add{position:relative;width:100%;padding-top:100%;border-radius:var(--rs);border:1.5px dashed var(--border-default);background:var(--surface-sunken);cursor:pointer;overflow:hidden}
.photo-add-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.photo-add-inner span{font-size:11px;color:var(--text-muted)}
.photo-add input{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0}

/* PHOTO SOURCE BUTTONS */
.photo-source-btns{display:flex;gap:8px;margin-top:4px;margin-bottom:4px}
.photo-src-btn{flex:1;padding:10px 8px;border:1px solid var(--border-default);border-radius:var(--rs);background:var(--surface-page);font-size:13px;color:var(--text-body);cursor:pointer;font-family:var(--font-b);display:flex;align-items:center;justify-content:center;gap:6px}
.photo-src-btn:active{background:var(--surface-hover)}

/* KEYWORDS */
.keywords-input-wrap{position:relative;margin-top:4px}
.keywords-container{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;min-height:4px}
.kw-tag{display:inline-flex;align-items:center;gap:4px;background:var(--surface-sunken);border:1px solid var(--border-subtle);border-radius:var(--rpill);padding:3px 10px;font-size:12px;color:var(--text-body)}
.kw-tag button{background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:14px;line-height:1;padding:0}
.kw-disp{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.kw-disp span{background:var(--surface-sunken);border-radius:var(--rpill);padding:2px 8px;font-size:11px;color:var(--text-body)}

/* FILE ATTACHMENTS */
.files-list{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.file-item{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--surface-sunken);border-radius:var(--rs);font-size:13px}
.file-item-icon{font-size:18px;flex-shrink:0}
.file-item-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-strong)}
.file-item-del{background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:16px;padding:2px;flex-shrink:0}
.file-add{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1.5px dashed var(--border-default);border-radius:var(--rs);cursor:pointer;color:var(--text-muted);font-size:13px;position:relative;overflow:hidden}
.file-add input{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0}

/* LIGHTBOX */
#lightbox{display:none;position:fixed;inset:0;background:rgba(16,39,51,.92);z-index:4000;align-items:center;justify-content:center;padding:24px}
#lightbox.open{display:flex}
#lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}

/* VERSION BADGE */
.version-badge{position:fixed;bottom:calc(var(--nav) + 4px);left:8px;font-family:var(--font-m);font-size:10px;color:var(--text-muted);opacity:.6;z-index:80;pointer-events:none}