:root { --forest:#174f43; --forest-dark:#103b32; --mint:#e5f3eb; --cream:#faf8f1; --ink:#23392f; --muted:#66756c; --border:#e4e9e1; --white:#fff; --accent:#efb26c; --shadow:0 16px 42px rgba(29,55,38,.075); }
    *,*::before,*::after { box-sizing:border-box }
    html { -webkit-text-size-adjust:100%; scroll-behavior:smooth }
    body { margin:0; background:var(--cream); color:var(--ink); font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; line-height:1.45; }
    button,input,textarea { font:inherit }
    button { cursor:pointer; }
    button:disabled { cursor:not-allowed; opacity:.52 }
    :focus-visible { outline:3px solid #eaa95a; outline-offset:3px }
    .shell { max-width:1060px; margin:0 auto; padding:0 22px 55px }
    header { padding:28px 0 18px; display:flex; gap:16px; align-items:center; justify-content:space-between }
    .logo { display:inline-flex; align-items:center; gap:12px; color:var(--forest); text-decoration:none }
    .logo-mark { display:grid; place-items:center; width:45px; height:45px; border-radius:16px; background:var(--forest); color:#fff; font-size:25px; box-shadow:0 7px 16px rgba(23,79,67,.19) }
    .logo-name { font-weight:850; letter-spacing:-.045em; font-size:23px; line-height:1 }
    .logo-sub { color:var(--muted); font-weight:560; font-size:12px; letter-spacing:.06em; text-transform:uppercase; margin-top:5px }
    .header-note { font-size:12px; color:#476c5e; background:#e7f3eb; padding:8px 12px; border-radius:100px; font-weight:700; }
    .hero { margin:7px 0 22px; padding:30px 36px; background:var(--forest); color:white; border-radius:26px; position:relative; overflow:hidden; display:flex; justify-content:space-between; gap:24px; }
    .hero::before { content:""; width:300px; height:300px; border:45px solid rgba(255,255,255,.055); position:absolute; border-radius:50%; right:-65px; top:-110px; pointer-events:none }
    .hero h1 { font-size:clamp(25px,4.3vw,40px); line-height:1.1; margin:0 0 11px; letter-spacing:-.045em; max-width:550px; }
    .hero p { color:#d8eae2; max-width:490px; font-size:15px; margin:0; }
    .hero-icon { position:relative; align-self:center; font-size:67px; transform:rotate(-8deg); filter:drop-shadow(0 12px 12px rgba(0,0,0,.10)); }
    .layout { display:grid; grid-template-columns:minmax(265px,.82fr) minmax(0,1.18fr); gap:20px; align-items:start }
    .panel { background:white; border:1px solid var(--border); box-shadow:var(--shadow); border-radius:24px; padding:25px }
    .panel h2 { margin:0; letter-spacing:-.033em; font-size:23px }
    .sub { margin:6px 0 20px; font-size:14px; color:var(--muted) }
    .field-label { color:#345647; font-weight:780; font-size:13px; display:block; margin-bottom:8px }
    textarea { border:1.6px solid #dbe4da; border-radius:15px; display:block; width:100%; min-height:186px; resize:vertical; padding:14px 15px; font-size:15px; color:#263e32; background:#fdfefd; outline:none; }
    textarea:focus, .name-input:focus { border-color:#459e79; box-shadow:0 0 0 3px #e9f6ef }
    textarea::placeholder { color:#9aa69e; opacity:1 }
    .hint { font-size:12px; color:var(--muted); margin:9px 0 15px }
    .primary, .secondary, .quiet { border:0; border-radius:13px; display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:780; transition:transform .1s ease,background-color .1s ease; }
    .primary { background:var(--forest); color:#fff; padding:13px 19px; }
    .primary:hover { background:var(--forest-dark) }
    button:active { transform:scale(.985) }
    .secondary { background:#edf3ee; color:var(--forest); padding:12px 14px; }
    .secondary:hover { background:#e0eee4 }
    .quiet { background:transparent; color:#587467; padding:9px 11px; }
    .quiet:hover { background:#f3f7f3 }
    .block { width:100%; }
    .divider { height:1px; background:var(--border); margin:23px 0 }
    .share-title { display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:15px; font-weight:800 }
    .share-desc { font-size:13px; color:var(--muted); margin:0 0 13px }
    .share-state { display:flex; gap:7px; align-items:center; color:var(--muted); font-size:12px; margin:10px 0 0 }
    .dot { display:inline-block; width:8px; height:8px; background:#bdc8c0; border-radius:50%; flex-shrink:0 }
    .dot.on { background:#43b580 }
    .list-heading { display:flex; gap:12px; align-items:flex-start; justify-content:space-between }
    .name-input { min-width:0; max-width:100%; width:100%; font-weight:850; font-size:22px; letter-spacing:-.04em; color:var(--ink); border:1.6px solid transparent; border-radius:10px; background:transparent; outline:none; padding:3px 6px; margin:-4px -6px 0; }
    .name-input:hover { border-color:#e1e9e2; }
    .mode-pill { flex-shrink:0; padding:6px 9px; background:var(--mint); color:#317158; font-weight:750; font-size:11px; border-radius:100px }
    .summary { display:flex; gap:8px; align-items:baseline; margin-top:14px; font-size:14px; color:var(--muted) }
    .summary strong { font-size:33px; color:var(--forest); line-height:1 }
    .progress { height:8px; margin:13px 0 18px; border-radius:999px; background:#e9eee8; overflow:hidden }
    .bar { width:0; height:100%; background:#69be8c; border-radius:999px; transition:width .2s ease }
    .list-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
    .section-title { font-weight:800; font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:.055em }
    .items { display:flex; flex-direction:column; }
    .item { display:flex; gap:10px; align-items:center; min-height:53px; padding:10px 2px; border-bottom:1px solid #edf0e9; animation:fadeIn .15s ease-out }
    .item:last-child { border-bottom:0 }
    .check-wrap { min-height:40px; min-width:40px; display:grid; place-items:center; cursor:pointer; flex-shrink:0; margin-left:-6px; }
    .check { appearance:none; -webkit-appearance:none; margin:0; width:24px; height:24px; border:2px solid #b0c5b6; border-radius:8px; background:#fff; cursor:pointer; display:grid; place-items:center; }
    .check:checked { background:#398e66; border-color:#398e66; }
    .check:checked::after { content:"✓"; font-weight:900; color:#fff; font-size:15px; }
    .item-name { min-width:0; flex:1; overflow-wrap:anywhere; font-size:15px; font-weight:580 }
    .item.bought .item-name { color:#819189; text-decoration:line-through; font-weight:450 }
    .mini-btn { color:#91a098; background:none; border:0; padding:8px; border-radius:9px; font-size:16px }
    .mini-btn:hover { color:#b84c4b; background:#fff1f0 }
    .empty { text-align:center; padding:30px 12px; color:var(--muted); }
    .empty-emoji { font-size:41px; display:block; margin-bottom:7px }
    .empty strong { display:block; color:var(--forest); margin-bottom:5px }
    details { margin-top:16px; border-top:1px dashed #e1e7df; }
    details summary { list-style:none; display:flex; justify-content:space-between; gap:10px; align-items:center; font-weight:750; color:#61776a; font-size:13px; cursor:pointer; padding:17px 2px 6px }
    details summary::-webkit-details-marker { display:none }
    .archive-count { background:#f0f4f0; border-radius:99px; padding:3px 9px; font-size:12px }
    .actions { margin-top:19px; display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap }
    .action-group { display:flex; flex-wrap:wrap; gap:6px; }
    footer { color:#819086; font-size:12px; text-align:center; padding:21px }
    #toast { position:fixed; z-index:20; bottom:24px; left:50%; transform:translate(-50%,15px); max-width:90vw; padding:12px 18px; border-radius:14px; background:#234d3c; color:white; box-shadow:0 12px 36px #0003; opacity:0; pointer-events:none; transition:.22s; font-size:14px; text-align:center }
    #toast.show { opacity:1; transform:translate(-50%,0) }
    [hidden] { display:none !important }
    @keyframes fadeIn { from {opacity:0;transform:translateY(3px)} to {opacity:1;transform:translateY(0)} }
    @media(max-width:730px) { .shell {padding:0 14px 25px} header {padding:17px 4px} .hero {padding:26px 23px;border-radius:22px} .hero-icon{font-size:46px} .hero h1{font-size:29px}.layout{grid-template-columns:1fr; gap:14px}.panel{border-radius:20px;padding:20px} .header-note{display:none} .sub{margin-bottom:14px} textarea{min-height:125px} .hero p{font-size:13px} .hero{margin-top:1px} }
    @media(prefers-reduced-motion:reduce) { *,*::before,*::after {animation-duration:.001s !important; transition-duration:.001s !important;scroll-behavior:auto!important} }
    .list-library {margin-bottom:20px;padding:20px 25px}
    .library-heading {display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
    .library-heading label {margin:0;font-size:18px}
    .library-controls {display:flex;gap:12px;align-items:stretch}
    .library-controls select {min-width:0;flex:1;padding:12px;border:1.6px solid #dbe4da;border-radius:12px;background:white;color:var(--ink);font:inherit}
    .list-library .hint {margin:10px 0 2px}
    .list-library .quiet {padding-left:0;font-size:13px}
    @media(max-width:500px){.library-controls{flex-direction:column}.list-library{padding:18px 20px}}
    .library-bottom {display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:6px}
    .list-library .delete-list {color:#a13d36;padding:9px 11px}
    .delete-list:hover {background:#fff1f0}
    .sort-toolbar {display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 8px}
    .sort-options {display:flex;gap:3px;padding:4px;background:#eff4ee;border-radius:12px}
    .sort-options button {border:0;background:transparent;color:#617568;padding:9px 12px;border-radius:9px;font-weight:750;min-height:40px}
    .sort-options button[aria-pressed="true"] {background:white;color:var(--forest);box-shadow:0 2px 6px #174f4314}
    #organizeButton {font-size:13px;min-height:44px}
    #organizeButton[aria-pressed="true"] {background:var(--forest);color:white}
    #organizeHint {margin:0 0 10px;font-size:12px;line-height:1.5}
    .category-heading {display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px;letter-spacing:-.01em;color:var(--forest);background:#f0f5ef;border-radius:10px;padding:10px 12px;margin:16px 0 2px}
    .category-count {font-size:11px;color:#65816f;min-width:22px;text-align:center}
    .item {min-height:78px;gap:8px}
    .item-content {min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
    .item-name {display:block;line-height:1.45;overflow-wrap:anywhere}
    .edit-form {display:flex;flex-direction:column;gap:6px;max-width:100%}
    .edit-form input {width:100%;box-sizing:border-box;border:1.5px solid #6a9d7f;border-radius:8px;padding:9px;font:inherit;font-size:15px;min-width:0}
    .edit-controls {display:flex;flex-wrap:wrap;gap:6px}
    .edit-controls button {border:1px solid #d5e2d4;padding:7px 10px;border-radius:8px;background:#f5faf4;font-weight:700;color:var(--forest);font-size:13px}
    .edit-controls button.primary {background:var(--forest);color:white}
    .rename-btn {font-size:17px;color:#356e52;background:#eaf4eb;min-height:38px;min-width:38px}
    .rename-btn:hover {color:#164e3e;background:#d8eddd}
    #reclassifyButton {font-size:12px;padding:8px 10px;white-space:normal}
    .reclassify-line {display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 8px}
    .category-select {align-self:flex-start;max-width:100%;min-width:0;min-height:34px;font-size:12px;padding:4px 5px;border:1px solid transparent;border-radius:7px;background:#f7f9f5;color:#5a7564;cursor:pointer}
    .category-select:hover {border-color:#bfd2c2}
    .category-select.unclassified {color:#8b6224;background:#fff5df}
    .item-actions {display:flex;align-items:center;gap:1px;flex-shrink:0}
    .move-btn {display:inline-grid;place-items:center;width:38px;min-height:42px;padding:4px;border:1px solid #dce7dc;background:#f7faf6;color:var(--forest);font-size:17px;border-radius:9px;flex-shrink:0}
    .move-btn:hover:not(:disabled) {background:#e6f1e5}
    button:disabled {opacity:.4;cursor:default}
    .drag-handle {padding:10px 4px;color:#96aa9a;cursor:grab;font-size:22px;user-select:none}
    .dragging {opacity:.4}
    .drop-target {box-shadow:inset 0 -3px #4a9871;background:#f2f8f0}
    .aisle-settings {margin:4px 0 18px;border-top:0;border-bottom:1px solid #edf0e9;padding-bottom:10px}
    .aisle-settings summary {padding:7px 0;font-size:12px;color:#5e7b68;display:block;list-style:revert}
    .aisle-settings summary::-webkit-details-marker {display:inline}
    .aisle-settings .hint {margin:8px 0}
    .aisle-row {display:flex;align-items:center;gap:4px;padding:4px 0;font-size:13px}
    .aisle-row span {flex:1;min-width:0}
    :focus-visible {outline:3px solid #459e79;outline-offset:3px}
    @media(max-width:500px){.item-actions{gap:3px;flex-wrap:wrap;max-width:81px}.item-actions .mini-btn{margin-left:auto;min-width:38px}.drag-handle{display:none}.item{gap:6px}.check-wrap{min-width:34px}.category-select{font-size:11px}.sort-toolbar{gap:4px}.sort-options button{padding:8px 10px}}
    .list-type-controls {margin:14px 0 5px;padding:12px 14px;border:1px solid #dfe9df;background:#f6faf5;border-radius:14px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
    .type-field-label {font-size:12px;font-weight:800;color:#3c5c4b}
    #listType {min-height:38px;flex:1;min-width:160px;border-radius:9px;border:1px solid #d0e0d3;background:white;padding:7px 10px;color:var(--forest);font-weight:750;max-width:280px}
    .type-hint {width:100%;margin:0;font-size:12px;color:#637d6a}
    [hidden] {display:none!important}
    .reuse-actions {margin-top:17px;border-radius:13px;background:#f0f7f0;padding:14px;display:flex;align-items:center;justify-content:space-between;gap:12px}
    .reuse-actions strong {font-size:13px;color:var(--forest)}
    .reuse-actions p {font-size:12px;color:var(--muted);margin:5px 0 0}
    .reuse-actions button {flex-shrink:0}
    .item.reusable-done {background:#f7faf7;border-radius:8px}
    .item.reusable-done .item-name {color:#718579;text-decoration:line-through;font-weight:450}
    #newListDialog {width:calc(100% - 32px);max-width:510px;border:1px solid #e1e9df;border-radius:21px;padding:24px;box-shadow:0 18px 70px #123d3240;background:#fff;color:var(--ink)}
    #newListDialog::backdrop {background:rgba(17,40,31,.50)}
    .new-dialog-top {display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:17px}
    .new-dialog-top h2 {margin:0;font-size:22px;letter-spacing:-.02em}
    .new-list-form {display:flex;flex-direction:column;gap:8px}
    .new-list-form input,.new-list-form select {width:100%;border:1.5px solid #d8e4d8;border-radius:11px;min-height:46px;padding:11px;font:inherit;background:#fff;color:var(--ink);margin-bottom:12px}
    .new-list-form .hint {margin:0 0 9px}
    .dialog-actions {display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
    @media(max-width:550px){.reuse-actions{align-items:stretch;flex-direction:column}.reuse-actions button{width:100%}.list-type-controls{align-items:stretch;flex-direction:column}#listType{max-width:none}.type-hint{width:auto}}

    /* V8 : accueil public et modèles de listes prêts à l'emploi. */
    .shell{max-width:1140px}
    .site-nav{display:flex;align-items:center;gap:5px;padding:5px;background:#edf3ed;border-radius:15px;margin-left:auto}
    .site-nav button{border:0;border-radius:10px;background:transparent;color:#59756a;font-size:13px;font-weight:780;padding:11px 14px;white-space:nowrap}
    .site-nav button[aria-current="page"]{color:var(--forest);background:white;box-shadow:0 2px 11px #233c3016}
    .site-nav button:hover{color:var(--forest)}
    .welcome-hero{display:grid;grid-template-columns:1.08fr .92fr;gap:52px;align-items:center;padding:67px 0 72px}
    .welcome-eyebrow{font-size:12px;letter-spacing:.11em;text-transform:uppercase;font-weight:850;color:#288353}
    .welcome-hero h1{font-size:clamp(38px,5vw,63px);line-height:1.07;letter-spacing:-.055em;margin:18px 0}
    .welcome-hero h1 em{font-style:normal;color:#28885d}
    .welcome-lead{font-size:18px;color:#62786b;line-height:1.62;margin:0 0 25px;max-width:575px}
    .welcome-ctas{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
    .welcome-benefits{display:flex;gap:16px;flex-wrap:wrap;margin-top:23px;font-size:12px;color:#50705d;font-weight:720}
    .welcome-example-wrap{position:relative;isolation:isolate}
    .welcome-example-wrap:before{content:'';position:absolute;inset:34px -14px -16px 30px;background:#e5ede1;transform:rotate(4deg);border-radius:33px;z-index:-1}
    .welcome-example{background:white;border:1px solid var(--border);border-radius:24px;padding:26px;box-shadow:0 18px 46px #1d372614}
    .welcome-example-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
    .example-eyebrow{font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:#759183;font-weight:850}
    .welcome-example h2{font-size:23px;line-height:1.2;letter-spacing:-.035em;margin:5px 0}
    .example-muted{font-size:13px;color:#698072;margin:0}
    .example-avatars{display:flex;gap:0;flex-shrink:0;padding-left:6px}
    .example-avatars span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#d9eadc;border:2px solid white;margin-left:-7px;color:#496452;font-size:11px;font-weight:850}
    .example-avatars span:nth-child(2){background:#f8dfbf}.example-avatars span:nth-child(3){background:#efdae9}.example-avatars span:nth-child(4){background:#e1e3f5}
    .example-track{margin:18px 0 7px;background:#e8f0e8;height:7px;border-radius:20px;overflow:hidden}
    .example-track span{display:block;width:40%;height:100%;background:#4bab78}
    .example-count{color:#768b7e;font-size:12px;margin-bottom:10px}
    .example-line{display:flex;align-items:center;gap:10px;border-bottom:1px solid #edf1eb;padding:11px 0;font-size:14px;font-weight:650}
    .example-line:last-child{border:0}
    .example-tick{flex-shrink:0;display:grid;place-items:center;width:22px;height:22px;border:2px solid #b7d1bf;border-radius:7px;color:#fff;font-size:13px;font-weight:900}
    .example-line.is-done .example-tick{background:#398e66;border-color:#398e66}
    .example-line.is-done .example-label{color:#8c9d91;text-decoration:line-through}
    .example-bubble{position:absolute;right:-10px;bottom:-18px;background:white;border:1px solid #dfe9df;border-radius:12px;box-shadow:0 10px 28px #153f281f;padding:12px 15px;font-weight:750;font-size:13px}
    .welcome-section{padding:25px 0 52px}
    .welcome-section h2{font-size:clamp(27px,3.2vw,37px);letter-spacing:-.045em;margin:12px 0}
    .welcome-section>p{color:#6a8375;margin:0 0 27px}
    .welcome-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px}
    .welcome-card{background:#fff;border:1px solid var(--border);padding:19px 15px;border-radius:19px;box-shadow:0 8px 20px #2342210b;text-align:left;min-height:180px;cursor:pointer}
    .welcome-card:hover,.template-choice:hover{border-color:#72ad88;background:#f6fbf6}
    .welcome-card .tile-icon{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:#eaf5eb;font-size:27px;margin-bottom:16px}
    .welcome-card:nth-child(2) .tile-icon{background:#fdf0dc}.welcome-card:nth-child(3) .tile-icon{background:#fcebe7}.welcome-card:nth-child(4) .tile-icon{background:#f1eaf4}.welcome-card:nth-child(5) .tile-icon{background:#e9eef8}
    .welcome-card strong{display:block;font-size:16px;letter-spacing:-.025em;margin-bottom:6px}
    .welcome-card small{display:block;color:#72877b;font-size:13px;line-height:1.48}
    .welcome-band{background:var(--forest);color:white;display:flex;align-items:center;justify-content:space-between;gap:20px;border-radius:23px;padding:30px 34px;margin:0 0 38px}
    .welcome-band h2{font-size:29px;letter-spacing:-.04em;margin:0 0 9px}
    .welcome-band p{color:#d9e9df;margin:0}
    .welcome-band .secondary{background:white;flex-shrink:0}
    .welcome-footer{font-size:12px;color:#7c9183;text-align:center;padding-bottom:25px}
    .app-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:18px 0 16px}
    .app-head-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
    .app-head h1{font-size:clamp(27px,3.5vw,36px);margin:0 0 5px;line-height:1.15;letter-spacing:-.04em}
    .app-head p{color:#65796d;font-size:14px;margin:0}
    .app-ideas{border:1px solid #d9e9d9;border-radius:20px;background:#f1f8f0;margin-bottom:20px;overflow:hidden}
    .app-ideas summary{cursor:pointer;padding:16px 21px;display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--forest);font-size:15px;font-weight:800;list-style:none}
    .app-ideas summary::-webkit-details-marker{display:none}
    .app-ideas summary small{font-size:12px;color:#617a69;font-weight:500}
    .app-ideas[open] summary{border-bottom:1px solid #dcebdc}
    .app-template-grid{padding:15px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
    .app-template-btn{min-width:0;border:1px solid #dce6db;background:white;border-radius:14px;padding:13px 9px;display:flex;align-items:center;flex-direction:column;gap:6px;text-align:center;font-weight:760;color:var(--ink);font-size:12px}
    .app-template-btn:hover{background:#fffef7;border-color:#76ad8b}
    .app-template-btn span{font-size:27px}.app-template-note{font-size:12px;color:#627969;padding:0 20px 17px;margin:0}
    #newListDialog{max-width:680px;max-height:92vh;overflow-y:auto}
    .new-template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:2px 0 15px}
    .template-choice{display:flex;align-items:center;gap:9px;min-width:0;padding:11px 10px;border:1.5px solid #e1e9df;border-radius:13px;text-align:left;color:var(--ink);background:white}
    .template-choice[aria-pressed="true"]{border-color:#398e66;background:#eaf6ec;box-shadow:inset 0 0 0 1px #398e66}
    .template-choice .template-emoji{font-size:22px;flex-shrink:0}.template-choice strong{font-size:12px;display:block}.template-choice small{display:block;color:#73877a;font-size:10px;line-height:1.3;margin-top:3px}
    .template-preview{background:#f4f8f3;border-radius:11px;padding:10px 12px;font-size:12px;color:#537560;margin:-2px 0 10px}
    @media(max-width:850px){.welcome-hero{gap:24px}.welcome-grid{grid-template-columns:repeat(3,1fr)}.app-template-grid{grid-template-columns:repeat(3,1fr)}.welcome-example{padding:20px}}
    @media(max-width:730px){.site-nav{margin-left:auto}.site-nav button{padding:9px 10px;font-size:12px}.logo-sub{font-size:10px}.welcome-hero{grid-template-columns:1fr;gap:34px;padding:36px 5px 55px}.welcome-lead{font-size:16px}.welcome-example-wrap{max-width:470px;width:calc(100% - 15px)}.welcome-grid{grid-template-columns:repeat(2,1fr)}.welcome-section{padding:12px 0 32px}.welcome-band{align-items:flex-start;flex-direction:column;padding:25px}.welcome-band h2{font-size:24px}.app-head{align-items:flex-start}.app-head .secondary{white-space:nowrap;padding:10px 11px;font-size:12px}.app-head{flex-wrap:wrap}.app-head-actions{width:100%;justify-content:flex-start}.app-ideas summary{flex-direction:column;align-items:flex-start;gap:3px}.new-template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
    @media(max-width:410px){.logo-name{font-size:18px}.logo-mark{width:39px;height:39px;font-size:22px}.logo{gap:7px}.site-nav button{padding:8px 7px;font-size:11px}.welcome-card{padding:15px 11px;min-height:155px}.welcome-card strong{font-size:14px}.welcome-card small{font-size:11px}.app-template-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.app-template-btn{font-size:11px;padding:10px 5px}}

    /* V9 : les modèles sont une section visible et non un panneau replié. */
    .app-ideas{padding:23px;border-color:#b4d8bb;box-shadow:0 11px 28px #214d3010;background:linear-gradient(120deg,#e7f5e8,#f7faf1)}
    .ideas-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:16px}
    .ideas-header h2{font-size:clamp(23px,3vw,29px);margin:5px 0 6px;letter-spacing:-.045em;color:var(--forest)}
    .ideas-header p{margin:0;font-size:13px;color:#597566;max-width:660px}
    .ideas-indicator{white-space:nowrap;background:white;border:1px solid #d7e8d8;border-radius:30px;padding:7px 11px;color:var(--forest);font-size:12px;font-weight:800}
    .app-template-grid{padding:0;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
    .app-template-btn{align-items:flex-start;text-align:left;border-radius:15px;padding:16px;gap:5px;min-height:172px;box-shadow:0 6px 12px #193c220b}
    .app-template-btn .template-big{font-size:28px;background:#eff6ec;padding:5px;border-radius:12px;line-height:1.3}
    .app-template-btn strong{font-size:15px;line-height:1.2;margin-top:3px}.app-template-btn small{font-size:12px;color:#668072;line-height:1.35}
    .app-template-btn em{font-size:11px;font-style:normal;color:#277452;font-weight:850;margin-top:auto}
    .visibility-fieldset{padding:0;border:0;min-width:0;margin:4px 0 13px}.visibility-fieldset legend{font-size:13px;font-weight:850;color:#3c5c4b;margin-bottom:9px}
    .visibility-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    .visibility-card{cursor:pointer;display:flex;align-items:center;gap:10px;border:2px solid #dce6dc;border-radius:14px;padding:15px;background:white}
    .visibility-card:has(input:checked){background:#eaf7ec;border-color:#398e66}
    .visibility-card input{width:17px;height:17px;min-height:17px;margin:0;accent-color:var(--forest);flex-shrink:0}
    .visibility-card b{display:block;font-size:14px}.visibility-card small{display:block;font-size:11px;color:#63806d;margin-top:3px}
    .access-panel{margin-top:16px;margin-bottom:16px;border:1px solid #d9e7dd;background:#f6faf6;border-radius:17px;padding:15px}
    .access-panel-heading{display:flex;align-items:baseline;flex-wrap:wrap;justify-content:space-between;gap:6px;margin-bottom:12px}
    .access-panel-heading b{font-size:13px;color:var(--forest)}.access-panel-heading small{font-size:11px;color:#6c8271}
    .access-switch{display:grid;grid-template-columns:1fr 1fr;gap:8px}
    .access-option{font-size:13px;border:2px solid #dbe6db;border-radius:12px;color:#537260;background:white;font-weight:800;padding:12px 9px;min-width:0}
    .access-option[aria-pressed="true"]{background:#e4f3e6;color:#174f43;border-color:#3b9465;box-shadow:0 0 0 1px #95c9a5}
    .access-option:disabled{opacity:.75;cursor:default}
    .access-links{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:12px}
    .access-message{font-size:12px;color:#577064;margin:0;max-width:370px}
    .access-links button{font-size:12px;padding:10px 13px}
    .share-target{color:var(--forest);font-size:13px;overflow-wrap:anywhere}
    @media(max-width:820px){.app-template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.app-template-btn{min-height:165px}}
    @media(max-width:500px){.app-ideas{padding:16px}.ideas-indicator{display:none}.app-template-grid{gap:9px}.app-template-btn{min-height:164px;padding:12px}.app-template-btn strong{font-size:14px}.visibility-card{padding:11px 8px}.access-links button{width:100%}}

    /* Zamilist V10 — identité approuvée. Les fonctions et les données V9 sont conservées. */
    :root{--forest:#1e2b58;--forest-dark:#162346;--mint:#edf3ed;--cream:#f8f2e9;--ink:#1e2b58;--muted:#667080;--border:#e9e0d5;--accent:#d0684f;--shadow:0 17px 44px rgba(30,43,88,.07);--sage:#4e7055;--clay:#d0684f;--sand:#f5e6d3}
    body{background:radial-gradient(circle at 2% 10%,#f6e0cd77,transparent 28%),linear-gradient(180deg,#fcf7ef 0%,#f8f2e9 74%,#f6f0e7 100%);color:var(--ink)}
    .shell{max-width:1250px;padding:0 27px 38px}
    header{padding:20px 0 19px;border-bottom:1px solid #e6ded370;gap:18px}
    .logo{gap:11px;color:var(--ink)}.logo-symbol{width:46px;height:53px;object-fit:contain;flex-shrink:0}.logo-name{font-weight:900;font-size:29px;letter-spacing:-.06em}.logo-sub{font-size:11px;color:#607460;letter-spacing:0;text-transform:none;font-weight:650}
    .site-nav{background:#f2eae0;border:1px solid #e7ded4}.site-nav button{color:#566176}.site-nav button[aria-current="page"]{color:var(--ink);box-shadow:0 3px 9px #27354b10}.site-nav button:hover{color:var(--forest)}
    .primary{background:var(--forest);box-shadow:0 4px 12px #1e2b5817;border-radius:13px}.primary:hover{background:var(--forest-dark)}
    .secondary{background:#fffaf4;color:var(--forest);border:1px solid #e4d8ca}.secondary:hover{background:#f5eade}
    .quiet{color:#5b687c}.quiet:hover{background:#faf2e9}
    :focus-visible{outline-color:#d0684f}
    .zami-hero{display:grid;grid-template-columns:.98fr 1.02fr;gap:20px;align-items:center;min-height:540px;padding:34px 0 45px}
    .zami-hero-copy{padding:14px 4px 15px 15px;position:relative;z-index:2}
    .welcome-eyebrow{color:var(--sage);font-size:11px;letter-spacing:.135em;font-weight:850}
    .zami-hero h1{font-weight:920;letter-spacing:-.075em;font-size:clamp(47px,5.5vw,78px);line-height:1.01;margin:16px 0 20px;color:var(--forest)}
    .zami-hero h1 span{color:var(--clay)}
    .welcome-lead{font-size:18px;color:#505b70;line-height:1.54;max-width:535px;margin-bottom:23px}
    .welcome-lead strong{color:var(--ink)}
    .welcome-ctas .primary{min-height:51px;padding:14px 19px}.welcome-ctas .secondary{min-height:51px}
    .welcome-benefits{color:#647363;margin-top:20px;gap:14px;font-weight:620}
    .zami-hero-visual{min-height:440px;height:100%;max-height:515px;position:relative;border-radius:29px;isolation:isolate}
    .zami-hero-visual:before{content:"";position:absolute;inset:14px 0 10px 33px;border-radius:28px;background:linear-gradient(140deg,#ecd9c5,#ddc4a7);z-index:-1}
    .zami-lifestyle{position:absolute;top:4px;right:0;width:80%;height:82%;object-fit:cover;object-position:center;border-radius:26px;box-shadow:0 23px 50px #5146351f}
    .zami-phone{position:absolute;top:37px;left:5px;width:min(48%,275px);height:405px;background:white;border:8px solid #19212e;border-radius:33px;box-shadow:0 22px 38px #182b3750;padding:25px 12px 12px;overflow:hidden;z-index:2;font-size:12px}
    .zami-phone-notch{position:absolute;top:8px;left:35%;width:30%;height:12px;border-radius:11px;background:#0e1626}
    .zami-phone-caption{font-weight:880;font-size:15px;letter-spacing:-.045em;display:flex;justify-content:space-between;gap:4px}
    .zami-phone-caption span{color:#66748a}.zami-phone-sub{font-size:10px;color:#7d8490;margin-bottom:11px}
    .zami-demo-aisle{padding:6px 7px;font-size:10px;font-weight:780;border-radius:7px;margin:11px 0 3px}
    .zami-demo-aisle.produce{background:#e2f1e2;color:#356449}.zami-demo-aisle.dairy{background:#e5eef9;color:#335e98}.zami-demo-aisle.bakery{background:#fbeddd;color:#95612a}
    .zami-demo-item{display:flex;align-items:center;gap:7px;border-bottom:1px solid #f0efed;padding:5px 3px;color:#293247;font-size:11px}
    .zami-demo-item>span:last-child{margin-left:auto}.demo-checkbox{display:inline-grid;place-items:center;width:14px;height:14px;border:1px solid #bbc3ce;border-radius:4px;flex-shrink:0}.demo-checkbox.checked{background:var(--sage);border-color:var(--sage);color:white;font-size:9px}
    .zami-phone-foot{position:absolute;bottom:14px;left:12px;right:12px;background:#eff4ec;color:var(--sage);padding:7px;text-align:center;border-radius:9px;font-size:10px;font-weight:850}
    .zami-visual-note{position:absolute;bottom:12px;right:8px;background:#fffbf7f5;color:var(--forest);padding:14px 18px;border-radius:19px;box-shadow:0 13px 23px #2222;font-size:13px;font-weight:780;max-width:195px;text-align:center;z-index:3}.zami-visual-note span{color:var(--clay);font-size:21px}
    .section-intro h2,.welcome-section h2,.zami-features h2{font-size:clamp(25px,3vw,37px);letter-spacing:-.045em;color:var(--ink);margin:9px 0 5px}.section-intro p{color:var(--muted);margin:0 0 20px}
    .zami-steps{padding:20px 0 36px}.zami-step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
    .zami-step{border:1px solid #eadfd3;background:#fffdfa;border-radius:19px;padding:19px;position:relative;box-shadow:0 8px 24px #1e2b5808;overflow:hidden}.zami-step-no{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#f5dfce;color:#7f3e33;font-weight:850;font-size:17px}.zami-step-icon{position:absolute;right:19px;top:17px;font-size:24px}.zami-step h3{font-size:17px;letter-spacing:-.02em;margin:14px 0 7px}.zami-step p{font-size:13px;color:#697386;line-height:1.5;margin:0 0 15px;min-height:39px}
    .zami-step-preview{border-radius:12px;border:1px solid #e9e5de;background:white;min-height:135px;padding:11px 13px;font-size:12px;color:#47516a;line-height:1.65}.zami-step-preview.raw{font-family:ui-monospace,monospace;background:#fcfbf8}.zami-step-preview.sorted{display:flex;flex-direction:column;gap:2px}.zami-step-preview.sorted span{font-weight:760;color:#3c674a;background:#ecf6ed;border-radius:5px;padding:2px 5px}.zami-step-preview.sorted span:nth-of-type(2){background:#e9eff9;color:#375f9b}.zami-step-preview.sorted span:nth-of-type(3){background:#fff2df;color:#a16a39}.zami-step-preview.sorted small{font-size:11px}.zami-step-avatars{display:flex;margin-bottom:10px}.zami-step-avatars b,.zami-step-avatars span{display:grid;place-items:center;width:27px;height:27px;border:2px solid white;border-radius:50%;background:#b7c8da;color:#1e2b58;font-size:10px;margin-left:-3px}.zami-step-avatars b:nth-child(2){background:#dfbda6}.zami-step-avatars b:nth-child(3){background:#d1dac4}.zami-step-preview.share>div:not(:first-child){padding:3px 1px;border-bottom:1px solid #f1ece7}.zami-step-preview.share small{float:right;font-size:10px;color:#6c8c73}
    .welcome-section{padding:32px 0 49px}.welcome-section>p{color:var(--muted);margin-bottom:21px}.welcome-grid{gap:12px}
    .welcome-card{position:relative;background:#fffdfa;border:1px solid #e8ddcf;border-radius:18px;min-height:207px;padding:18px 15px 33px;box-shadow:0 5px 18px #1e2b5808}.welcome-card:hover,.template-choice:hover{border-color:#7b9880;background:#fdfbf6;transform:translateY(-2px)}
    .welcome-card .tile-icon{font-size:28px;width:55px;height:55px;border-radius:15px;margin-bottom:16px}.welcome-card:nth-child(1) .tile-icon{background:#e5efe2}.welcome-card:nth-child(2) .tile-icon{background:#e9eef9}.welcome-card:nth-child(3) .tile-icon{background:#ecf1e8}.welcome-card:nth-child(4) .tile-icon{background:#f8e9dd}.welcome-card:nth-child(5) .tile-icon{background:#f2e8e7}
    .welcome-card small{color:#6c7381}.tile-arrow{position:absolute;bottom:12px;right:14px;font-size:17px;color:var(--clay)}
    .zami-features{padding:10px 0 46px}.zami-features h2{margin-bottom:18px}.zami-features-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.zami-features-grid>div{display:flex;flex-direction:column;gap:7px;padding:8px 11px;border-right:1px solid #ded8d0}.zami-features-grid>div:last-child{border:0}.zami-features-grid b{font-size:14px}.zami-features-grid p{margin:0;font-size:12px;color:var(--muted);line-height:1.52}.feature-round{width:45px;height:45px;display:grid;place-items:center;border-radius:50%;font-size:25px;color:white}.feature-round.sage{background:var(--sage)}.feature-round.clay{background:var(--clay)}.feature-round.blue{background:#506e9d}.feature-round.sand{background:#e8d5b9;color:var(--forest)}
    .welcome-band{background:linear-gradient(110deg,#1e2b58,#2d3d69);border-radius:20px}.welcome-band h2{color:white}.welcome-band p{color:#e1e4ee}.welcome-band .secondary{color:var(--forest)}.welcome-footer{color:#7c808d}
    /* Interface de l'application : même ADN graphique. */
    .app-head{padding:8px 3px}.app-head h1{color:var(--ink)}.app-head p{color:#6c7283}.panel,.list-library{border-color:#e8e0d4;background:#fffdfa}.hero{background:linear-gradient(120deg,#1e2b58,#354f61);border-radius:20px}.hero p{color:#e7e9ee}
    .app-ideas{background:linear-gradient(130deg,#f5eadf,#eef2e9);border-color:#eadccd}.ideas-header h2{color:var(--forest)}.ideas-header p{color:#637181}.ideas-indicator{color:var(--forest);border-color:#e4d9d0}
    .app-template-btn{background:white;border-color:#e5dcd2;box-shadow:0 5px 11px #1928420c}.app-template-btn:hover{border-color:#b5b9a1;background:#fffdf7}.app-template-btn em{color:#bd684e}.app-template-btn small{color:#728084}.app-template-btn .template-big{background:#f5ebe1}
    textarea{background:#fff;border-color:#dadfdb;color:var(--ink)}textarea:focus,.name-input:focus{border-color:var(--sage);box-shadow:0 0 0 3px #edf2ed}.field-label{color:#29385e}
    .list-library{box-shadow:0 8px 26px #1e2b580a}.list-library .library-controls select{border-color:#dedbd7}.name-input{color:var(--ink)}.mode-pill{background:#e7eee4;color:var(--sage)}.summary strong{color:var(--forest)}.bar{background:var(--sage)}.progress{background:#eeeae1}.check{border-color:#aebbb7}.check:checked{background:var(--sage);border-color:var(--sage)}
    .item{border-bottom-color:#eeeae4}.item.reusable-done{background:#f5f7f2}.item.bought .item-name,.item.reusable-done .item-name{color:#83898a}.list-type-controls{border-color:#e2e6df;background:#f6f7f4}.type-field-label,.access-panel-heading b{color:var(--forest)}#listType{color:var(--forest);border-color:#d9dfd8}.reuse-actions{background:#f1f5ef}.type-hint{color:#69737b}
    .access-panel{background:#f8f6f1;border-color:#e4e1d8}.access-option{border-color:#e0e1dc;color:#596b67}.access-option[aria-pressed="true"]{background:#e7f0e6;border-color:var(--sage);color:#34543e;box-shadow:0 0 0 1px #b3cbbb}.access-message{color:#697581}.visibility-card:has(input:checked){background:#ecf2e8;border-color:var(--sage)}.visibility-card{border-color:#e5e0d6}.template-choice[aria-pressed="true"]{border-color:var(--sage);background:#edf3ea;box-shadow:inset 0 0 0 1px #bccfbd}.template-preview{background:#f8f1e9;color:#68716d}
    #newListDialog{border-color:#e5d9ce;background:#fffdfa}#newListDialog::backdrop{background:#17234280}#toast{background:var(--forest)}
    @media(max-width:950px){.zami-hero{gap:12px;grid-template-columns:1.03fr .97fr}.zami-phone{width:55%}.zami-hero h1{font-size:58px}.welcome-grid{grid-template-columns:repeat(3,1fr)}.zami-features-grid{grid-template-columns:repeat(2,1fr)}}
    @media(max-width:730px){.shell{padding:0 16px 26px}header{padding:13px 1px}.logo-name{font-size:24px}.logo-symbol{width:38px;height:44px}.logo-sub{font-size:10px}.site-nav{padding:3px}.site-nav button{padding:9px 10px;font-size:12px}.zami-hero{grid-template-columns:1fr;padding:30px 0 26px;gap:22px}.zami-hero-copy{padding:2px 4px}.zami-hero h1{font-size:clamp(45px,13vw,70px);line-height:1.03;margin:13px 0}.welcome-lead{font-size:15px}.welcome-ctas .primary,.welcome-ctas .secondary{min-height:47px}.zami-hero-visual{height:320px;min-height:320px;width:100%;max-width:540px;margin:0 auto}.zami-lifestyle{width:83%;height:85%}.zami-phone{height:302px;width:44%;left:6px;top:10px;border-width:6px;border-radius:26px;padding:18px 8px 8px;font-size:10px}.zami-phone-caption{font-size:11px}.zami-phone-sub{font-size:9px;margin-bottom:1px}.zami-phone-notch{top:5px}.zami-demo-aisle{font-size:9px;margin-top:7px;padding:4px}.zami-demo-item{padding:3px 1px;font-size:9px}.zami-phone-foot{display:none}.zami-visual-note{font-size:10px;bottom:0;right:0;max-width:155px;padding:9px}.zami-step-grid{grid-template-columns:1fr;gap:12px}.zami-step{padding:16px}.zami-step p{min-height:0}.zami-step-preview{min-height:0}.welcome-grid{grid-template-columns:repeat(2,1fr)}.welcome-card{min-height:175px}.zami-features-grid{grid-template-columns:repeat(2,1fr);gap:8px}.zami-features-grid>div{padding:10px 5px}.welcome-section{padding:22px 0 30px}.welcome-band{padding:22px}.welcome-band h2{font-size:23px}.zami-features h2{font-size:26px}}
    @media(max-width:385px){.logo-sub{font-size:9px}.logo-name{font-size:21px}.logo-symbol{width:34px}.site-nav button{font-size:11px;padding:8px 7px}.zami-hero-visual{height:280px;min-height:280px}.zami-phone{height:275px;width:48%}.welcome-ctas{gap:6px}.welcome-ctas .primary{font-size:12px;padding:12px}.welcome-ctas .secondary{font-size:12px;padding:11px}.welcome-card{padding:12px 10px 28px}}

/* FR / EN language selection — accessible on mobile and desktop */
header { position: relative; }
.language-switch { display: inline-flex; align-items: center; justify-content: center; gap: 2px; margin-left: 12px; padding: 3px; background: #eaf0e9; border: 1px solid #cbd8cb; border-radius: 999px; flex-shrink: 0; }
.language-switch button { border: 0; border-radius: 999px; min-width: 38px; min-height: 34px; padding: 6px 9px; font-size: 13px; font-weight: 750; background: transparent; color: #314c3b; cursor: pointer; }
.language-switch button[aria-pressed="true"] { background: #1e2b58; color: #fff; box-shadow: 0 1px 3px #1e2b5826; }
.language-switch button:focus-visible { outline: 3px solid #d0684f; outline-offset: 2px; }
@media (max-width: 600px) { .language-switch { margin-left: auto; } .language-switch button { min-width: 34px; min-height: 38px; } }

@media (max-width: 650px) {
  header { flex-wrap: wrap; gap: 8px 5px; }
  header .logo { order: 1; flex: 1; min-width: 0; }
  header .language-switch { order: 2; margin-left: auto; }
  header .site-nav { order: 3; flex-basis: 100%; width: 100%; margin-left: 0; justify-content: space-around; }
}

/* V13.1 — mobile landing-page polish: scannable features and readable CTA. */
@media (max-width: 600px) {
  /* Replace cramped 2-column feature tiles with compact icon + copy rows. */
  .zami-features { padding: 8px 0 26px; }
  .zami-features h2 { margin-bottom: 8px; }
  .zami-features-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .zami-features-grid > div {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 0;
    align-items: start;
    padding: 16px 2px;
    border-right: 0;
    border-bottom: 1px solid #ded8d0;
  }
  .zami-features-grid > div:last-child { border: 0; }
  .zami-features-grid .feature-round {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 48px;
    height: 48px;
    font-size: 25px;
  }
  .zami-features-grid b {
    grid-column: 2;
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: -.02em;
    padding-top: 2px;
  }
  .zami-features-grid p {
    grid-column: 2;
    font-size: 13px;
    line-height: 1.48;
    margin-top: 5px;
  }
  /* Prevent CTA text from being compressed beside the button on iPhones. */
  .welcome-band {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    min-width: 0;
    border-radius: 20px;
    padding: 24px 21px;
    margin-bottom: 26px;
  }
  .welcome-band > div { min-width: 0; }
  .welcome-band h2 {
    font-size: clamp(22px, 5.6vw, 26px);
    line-height: 1.24;
    letter-spacing: -.035em;
    text-wrap: balance;
    margin: 0 0 12px;
  }
  .welcome-band p { font-size: 15px; line-height: 1.58; }
  .welcome-band .secondary {
    display: block;
    width: 100%;
    min-height: 49px;
    padding: 12px 14px;
    white-space: normal;
    text-align: center;
    font-size: 15px;
  }
  .welcome-footer { font-size: 12px; line-height: 1.6; padding: 0 6px 27px; }
}

/* V13.2 — app-first responsive layout; desktop two-column application untouched. */
.templates-toggle { display: none; }
@media (max-width: 730px) {
  /* A mobile app should lead with the actual lists, not eight templates. */
  #appPage:not([hidden]) { display: flex; flex-direction: column; min-width: 0; }
  #appPage > .app-head { order: 1; }
  #appPage > .list-library { order: 2; }
  #appPage > .layout { order: 3; min-width: 0; }
  #appPage > .app-ideas { order: 4; }
  #appPage > footer { order: 5; }
  .app-head { margin: 8px 0 12px; gap: 10px; }
  .app-head .welcome-eyebrow, .app-head p { display: none; }
  .app-head h1 { font-size: clamp(22px, 6vw, 27px); line-height: 1.14; }
  .app-head-actions { width: 100%; gap: 8px; }
  .app-head-actions .secondary { flex: 0 1 auto; white-space: normal; min-height: 43px; font-size: 13px; }
  #appShareButton { min-width: 0; }
  .list-library { margin-bottom: 12px; padding: 16px; }
  .library-heading { margin-bottom: 8px; }
  .library-controls { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
  .library-controls select { width: 100%; min-width: 0; }
  #newListTop { font-size: 12px; padding: 9px 10px; min-height: 44px; white-space: normal; }
  #catalogHint { margin: 7px 0; font-size: 11px; }
  .library-bottom { gap: 8px; }
  .library-bottom .quiet { font-size: 12px; }
  .layout { gap: 12px; }
  .layout > .panel { padding: 18px 16px; }
  #addTitle { font-size: 22px; }
  #addSubtitle { font-size: 13px; margin-bottom: 13px; }
  #bulkText { min-height: 106px; max-height: 260px; font-size: 16px; }
  #addHint { margin: 9px 0 12px; }
  /* The header share control remains; suppress the duplicate CTA in the input panel. */
  .layout > .panel:first-child > .divider,
  .layout > .panel:first-child > .share-title,
  .layout > .panel:first-child > .share-desc,
  .layout > .panel:first-child > #shareButton,
  .layout > .panel:first-child > .share-state { display: none; }
  /* Grocery items should appear ahead of advanced access and list-type options. */
  #listPanel { display: flex; flex-direction: column; min-width: 0; }
  #listPanel > .list-heading { order: 1; }
  #listPanel > .summary { order: 2; }
  #listPanel > .progress { order: 3; }
  #listPanel > .sort-toolbar { order: 4; }
  #listPanel > #organizeHint { order: 5; }
  #listPanel > #reclassifyLine { order: 6; }
  #listPanel > #aisleSettings { order: 7; }
  #listPanel > .list-top { order: 8; }
  #listPanel > #items { order: 9; }
  #listPanel > #empty { order: 10; }
  #listPanel > #archive { order: 11; }
  #listPanel > #reuseActions { order: 12; }
  #listPanel > .actions { order: 13; }
  #listPanel > .access-panel { order: 14; }
  #listPanel > .list-type-controls { order: 15; }
  #listPanel .list-heading { align-items: center; gap: 8px; }
  #listPanel .name-input { font-size: 21px; }
  #listPanel .mode-pill { font-size: 10px; }
  #listPanel .summary { margin-top: 8px; }
  #listPanel .progress { margin: 9px 0 12px; }
  #listPanel .actions { margin-top: 12px; }
  #listPanel .access-panel { margin-top: 18px; }
  #listPanel .list-type-controls { margin-top: 0; }
  /* Empty lists shouldn't show aisle organization before there are items. */
  #listPanel.is-empty-list > .sort-toolbar,
  #listPanel.is-empty-list > #organizeHint,
  #listPanel.is-empty-list > #reclassifyLine,
  #listPanel.is-empty-list > #aisleSettings,
  #listPanel.is-empty-list > .list-top,
  #listPanel.is-empty-list > .progress { display: none; }
  #listPanel.is-empty-list .empty { padding: 13px 7px; }
  #listPanel.is-empty-list .empty-emoji { font-size: 26px; margin-bottom: 3px; }
  /* Templates remain discoverable below the active list. */
  #appPage > .app-ideas { padding: 15px; margin-top: 4px; }
  #appPage > .app-ideas .ideas-header { align-items: center; flex-direction: row; margin: 0; gap: 8px; }
  #appPage > .app-ideas .ideas-header .welcome-eyebrow,
  #appPage > .app-ideas .ideas-header p,
  #appPage > .app-ideas .ideas-indicator { display: none; }
  #appPage > .app-ideas .ideas-header h2 { font-size: 17px; line-height: 1.25; margin: 0; }
  #appPage > .app-ideas .templates-toggle { display: inline-flex; flex-shrink: 0; border: 1px solid #d8e4d6; font-size: 12px; padding: 10px; min-height: 40px; }
  #appPage > .app-ideas:not(.templates-expanded) .app-template-grid { display: none; }
  #appPage > .app-ideas .app-template-grid { margin-top: 14px; }
}
@media (max-width: 380px) {
  #appPage > .app-ideas .ideas-header { flex-wrap: wrap; }
  #appPage > .app-ideas .templates-toggle { width: 100%; }
  .app-head-actions .secondary { padding: 10px 9px; }
  .library-controls { grid-template-columns: minmax(0,1fr) 116px; }
}
/* V13.3 — two-tone brand wordmark and a clearer landing-page phone preview. */
/* Existing brand colours: deep navy for Zami, terracotta for list. */
header .logo { gap: 12px; }
header .logo-symbol { width: 54px; height: 62px; }
header .logo-name { font-size: 34px; letter-spacing: -.055em; white-space: nowrap; color: var(--forest); }
header .logo-name-accent { color: var(--clay); }
header .logo-sub { font-size: 11.5px; }
/* Improve the primary headline's coral contrast slightly. */
.zami-hero h1 span { color: #c05c45; }
/* A roughly 12–14% larger phone, without sacrificing the real-life photo. */
.zami-hero-visual { min-height: 460px; }
.zami-phone {
  width: min(54%, 313px);
  height: 442px;
  top: 14px;
  left: 3px;
  border-radius: 35px;
}
.zami-phone-caption { font-size: 16px; }
.zami-demo-aisle { font-size: 10.5px; }
.zami-demo-item { font-size: 11.5px; }
@media (min-width: 731px) and (max-width: 950px) {
  .zami-phone { width: min(61%, 313px); height: 435px; top: 14px; }
}
@media (max-width: 730px) {
  header .logo-symbol { width: 43px; height: 50px; }
  header .logo-name { font-size: 27px; }
  header .logo-sub { font-size: 10px; }
  .zami-hero-visual { min-height: 320px; }
  .zami-phone {
    width: 49%;
    height: 313px;
    top: 4px;
    left: 4px;
    border-radius: 26px;
  }
  .zami-phone-caption { font-size: 11px; }
  .zami-demo-aisle { font-size: 9px; }
  .zami-demo-item { font-size: 9px; }
}
@media (max-width: 385px) {
  header .logo-symbol { width: 38px; height: 44px; }
  header .logo-name { font-size: 23px; }
  header .logo-sub { font-size: 9px; }
  .zami-hero-visual { min-height: 280px; }
  .zami-phone { width: 52%; height: 276px; top: 3px; }
}

/* V13.4 — fluid desktop sizing with laptop, tablet and mobile safeguards.
   Viewport sizes are CSS pixels; the OS display scale is intentionally untouched. */
@media (min-width: 1280px) {
  /* Fill large laptops and scaled high-resolution monitors without stretching endlessly. */
  .shell {
    max-width: clamp(1250px, 87vw, 1500px);
    padding-inline: clamp(27px, 2.25vw, 38px);
  }
  .zami-hero {
    gap: clamp(20px, 2.5vw, 42px);
    grid-template-columns: minmax(0, .97fr) minmax(0, 1.03fr);
  }
  .zami-hero h1 { font-size: clamp(72px, 5.3vw, 92px); }
  .zami-hero-copy { padding-left: clamp(4px, 1vw, 16px); }
  .welcome-lead { font-size: clamp(18px, 1.15vw, 20px); max-width: 600px; }
  .welcome-ctas .primary, .welcome-ctas .secondary {
    font-size: clamp(15px, .98vw, 17px);
    min-height: 53px;
  }
  .welcome-benefits { font-size: clamp(12px, .83vw, 14px); }
  .section-intro h2, .welcome-section h2, .zami-features h2 {
    font-size: clamp(34px, 2.4vw, 42px);
  }
  .zami-step { padding: clamp(19px, 1.5vw, 25px); }
  .zami-step h3 { font-size: clamp(17px, 1.08vw, 19px); }
  .zami-step p { font-size: clamp(13px, .92vw, 15px); }
  .zami-step-preview { font-size: clamp(12px, .85vw, 14px); }
  .welcome-grid { gap: clamp(12px, 1.1vw, 18px); }
  .welcome-card { padding: 20px 19px 36px; }
  .welcome-card strong { font-size: clamp(16px, 1.05vw, 18px); }
  .welcome-card small { font-size: clamp(13px, .9vw, 15px); }
  .zami-features-grid b { font-size: clamp(14px, 1.04vw, 17px); }
  .zami-features-grid p { font-size: clamp(12px, .9vw, 15px); }
  .welcome-band h2 { font-size: clamp(29px, 2.1vw, 36px); }
  .welcome-band p { font-size: clamp(16px, 1.1vw, 18px); }
  .welcome-band .secondary { min-height: 52px; font-size: 16px; }
  /* More room in the app, but keep its editing controls comfortable to reach. */
  .app-head h1 { font-size: clamp(36px, 2.5vw, 43px); }
  .app-head p { font-size: clamp(14px, 1vw, 16px); }
  .layout { grid-template-columns: minmax(340px, .85fr) minmax(0, 1.15fr); gap: clamp(20px, 1.65vw, 28px); }
  .layout > .panel { padding: clamp(25px, 1.9vw, 32px); }
  .layout > .panel h2 { font-size: clamp(23px, 1.55vw, 27px); }
  .layout .sub { font-size: clamp(14px, .96vw, 16px); }
  .layout .hint { font-size: clamp(12px, .85vw, 14px); }
  .layout .field-label { font-size: clamp(13px, .9vw, 15px); }
  .layout textarea { min-height: 190px; font-size: 16px; }
  .app-template-btn strong { font-size: clamp(15px, 1.02vw, 17px); }
  .app-template-btn small { font-size: clamp(12px, .89vw, 14px); }
}
@media (min-width: 1500px) {
  .zami-hero { min-height: 590px; }
  .zami-hero-visual { min-height: 520px; max-height: 565px; }
  .zami-lifestyle { width: 82%; height: 86%; }
  .zami-phone {
    width: min(53%, 342px);
    height: clamp(445px, 28vw, 476px);
    top: 14px;
  }
  .zami-phone-caption { font-size: 17px; }
  .zami-demo-aisle { font-size: 11px; }
  .zami-demo-item { font-size: 12px; }
  .zami-visual-note { font-size: 14px; }
}
/* Tablet and small-laptop viewport: prioritize comfortable columns. */
@media (min-width: 731px) and (max-width: 990px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .layout > .panel { min-width: 0; }
  .zami-step-grid { gap: 11px; }
  .zami-step { padding: 16px 13px; }
  .zami-step h3 { font-size: 15px; }
  .zami-step-preview { padding: 9px; }
  .welcome-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zami-features-grid { gap: 12px; }
}
@media (min-width: 731px) and (max-width: 850px) {
  .zami-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 12px; }
  .zami-hero-copy { padding-left: 0; }
  .zami-hero h1 { font-size: clamp(58px, 8vw, 70px); }
  .zami-hero-visual { width: min(100%, 590px); margin-inline: auto; }
  .zami-step-grid { grid-template-columns: minmax(0, 1fr); }
  .zami-step p { min-height: 0; }
  .welcome-band { gap: 18px; }
  .welcome-band h2 { font-size: 25px; }
}
/* Mobile: retain the tested V13.2 list-first design and readable tap targets. */
@media (max-width: 730px) {
  .shell { width: 100%; max-width: none; }
  .zami-hero-copy, #appPage, #listPanel { min-width: 0; }
  .welcome-lead, .zami-features-grid p { overflow-wrap: break-word; }
}
/* On tablets too, existing lists and product entry come before optional templates. */
@media (min-width: 731px) and (max-width: 990px) {
  #appPage:not([hidden]) { display: flex; flex-direction: column; min-width: 0; }
  #appPage > .app-head { order: 1; }
  #appPage > .list-library { order: 2; }
  #appPage > .layout { order: 3; min-width: 0; }
  #appPage > .app-ideas { order: 4; }
  #appPage > footer { order: 5; }
}

/* V13.5 — explicit merge/keep choice for repeated pasted grocery items. */
#duplicateDialog {
  width: min(560px, calc(100vw - 28px));
  max-height: min(80dvh, 680px);
  border: 1px solid #e6ddcf;
  border-radius: 22px;
  padding: 0;
  background: #fffdfa;
  color: #1e2b58;
  box-shadow: 0 24px 65px #1e2b584d;
}
#duplicateDialog::backdrop { background: #17234299; }
#duplicateDialog .duplicate-confirm { padding: clamp(19px, 4vw, 29px); }
#duplicateDialog h2 { margin: 0 0 11px; font-size: clamp(22px, 4.4vw, 27px); line-height: 1.2; }
#duplicateDialog p { color: #5e6878; line-height: 1.5; margin: 0 0 14px; }
#duplicateDialog .duplicate-proposals { display: grid; gap: 10px; overflow-y: auto; max-height: 250px; padding-right: 3px; margin-bottom: 15px; }
#duplicateDialog .duplicate-proposal { background: #f3f6f0; border: 1px solid #dce8d8; border-radius: 11px; padding: 12px 14px; overflow-wrap: anywhere; }
#duplicateDialog .duplicate-originals { color: #64717d; font-size: 13px; line-height: 1.45; }
#duplicateDialog .duplicate-result { color: #34543e; font-size: 16px; font-weight: 800; margin-top: 5px; }
#duplicateDialog #duplicateSafety { font-size: 12px; }
#duplicateDialog .duplicate-buttons { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
#duplicateDialog .duplicate-buttons button { min-height: 46px; padding: 11px 15px; font-size: 14px; }
@media (max-width: 420px) {
  #duplicateDialog .duplicate-buttons { display: grid; grid-template-columns: 1fr; }
  #duplicateDialog .duplicate-buttons button { width: 100%; }
}

/* V13.6 — safe responsive collaboration, duplicate controls, Plus navigation. */
.site-nav a.plus-nav {display:inline-flex;align-items:center;justify-content:center;padding:10px 13px;white-space:nowrap;border-radius:10px;color:#814432;background:#f5ded2;text-decoration:none;font-weight:850;font-size:13px}
.site-nav a.plus-nav:hover {background:#f0cebf}
.plus-teaser {display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 28px;margin:16px 0 30px;background:#f4e9dd;border:1px solid #e9dac8;border-radius:22px}
.plus-teaser h2 {font-size:clamp(23px,2.5vw,31px);margin:6px 0;color:#1e2b58;letter-spacing:-.045em}
.plus-teaser p {font-size:14px;color:#596373;margin:0}
.plus-teaser .secondary {flex-shrink:0;text-decoration:none}
.duplicate-scan {border:1px dashed #b4bfae;border-radius:10px;align-self:flex-start;font-size:12px;margin:5px 0 12px;color:#4e7055}
.collab-panel {background:#f3f7f1;border:1px solid #dce7d9;padding:14px;border-radius:16px;margin:15px 0 8px}
.collab-heading {display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.collab-heading strong {font-size:14px;color:#2c4736}
.collab-heading button {padding:8px 12px;font-size:12px}
.collab-names {font-size:13px;color:#4d6053;overflow-wrap:anywhere;margin:9px 0 3px}
.collab-panel .hint {margin:5px 0 0;font-size:11px}
.claim-button {display:block;max-width:100%;align-self:flex-start;padding:5px 9px;margin-top:5px;border:1px solid #d4e1d1;background:#eef5ea;border-radius:9px;color:#486e51;font-size:12px;font-weight:700;text-align:left;cursor:pointer;overflow-wrap:anywhere}
.claim-button.mine {background:#e5eeff;border-color:#ceddf3;color:#2a548a}
.claim-button:disabled {cursor:default;opacity:.85}
.participant-dialog {border:0;border-radius:22px;padding:0;max-width:min(440px,calc(100vw - 30px));width:100%;box-shadow:0 22px 65px #1e2b5836}
.participant-dialog::backdrop {background:#17234280}
.participant-form {padding:26px;display:grid;gap:12px}
.participant-form h2 {font-size:22px;letter-spacing:-.04em;margin:0}
.participant-form p {font-size:14px;color:#687386;line-height:1.5;margin:0 0 4px}
.participant-form input {width:100%;min-height:48px;padding:12px;border:1px solid #cfdbd0;border-radius:11px;font-size:16px}
.participant-form .dialog-actions {display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:7px}
@media(max-width:990px){.plus-teaser {flex-direction:column;align-items:flex-start}}
@media(max-width:730px){
  #listPanel > .collab-panel {order:12}
  #listPanel > #duplicateScan {order:6;align-self:flex-start}
  .plus-teaser {margin:5px 0 19px;padding:20px}
  .plus-teaser .secondary {width:100%;text-align:center}
  .site-nav a.plus-nav {padding:9px 12px;font-size:12px}
}
@media(max-width:380px){.site-nav a.plus-nav {padding:8px 8px;font-size:11px}.collab-heading button {width:100%}}

/* V14 — iPhone-style 9:19.5 silhouette, preserved at all screen widths.
   The demo remains real HTML/CSS in front of the original photo. */
@media (min-width: 1200px) {
  .zami-hero-visual { min-height: 555px; max-height: none; }
  .zami-phone {
    width: min(48%, 248px);
    height: auto;
    aspect-ratio: 9 / 19.5;
    top: 10px;
    left: 13px;
    border-radius: 42px;
  }
  .zami-phone-caption { font-size: 15px; }
}
@media (min-width: 731px) and (max-width: 1199px) {
  .zami-hero-visual { min-height: 495px; max-height: none; }
  .zami-phone {
    width: min(46%, 225px);
    height: auto;
    aspect-ratio: 9 / 19.5;
    top: 10px;
    left: 5px;
    border-radius: 38px;
  }
  .zami-phone-caption { font-size: 14px; }
}
@media (max-width: 730px) {
  .zami-hero-visual { height: auto; min-height: 405px; max-height: none; }
  .zami-phone {
    width: min(45%, 182px);
    height: auto;
    aspect-ratio: 9 / 19.5;
    top: 7px;
    border-radius: 30px;
  }
}
@media (max-width: 385px) {
  .zami-hero-visual { min-height: 335px; }
  .zami-phone { width: min(45%, 153px); aspect-ratio: 9 / 19.5; height: auto; border-radius: 27px; }
}

/* V14 — realistic hero phone content, based on the real shopping-list screen.
   This is a static demonstration, not a second interactive list. */
.zami-demo-head {
  display:flex;justify-content:space-between;align-items:flex-start;gap:5px;
  margin:3px 0 12px;
}
.zami-demo-title {
  flex:1;min-width:0;font-size:14px;font-weight:900;line-height:1.15;
  letter-spacing:-.045em;color:#1e2b58;
}
.zami-demo-shared {
  flex-shrink:0;padding:6px 7px;border-radius:100px;
  background:#e7f0e7;color:#4e7055;
  font-size:8px;font-weight:900;letter-spacing:.02em;white-space:nowrap;
}
.zami-demo-summary {
  display:flex;justify-content:space-between;align-items:baseline;gap:4px;
  color:#657186;font-size:10px;margin-bottom:7px;white-space:nowrap;
}
.zami-demo-summary-left { display:flex;align-items:baseline;gap:4px;min-width:0; }
.zami-demo-summary-left strong {
  color:#1e2b58;font-size:24px;line-height:1;font-weight:900;
}
.zami-demo-summary small { color:#657186;font-size:9px; }
.zami-demo-track {
  height:6px;background:#e9e7df;border-radius:99px;overflow:hidden;margin-bottom:12px;
}
.zami-demo-track span {
  display:block;width:30%;height:100%;border-radius:99px;background:#4e7055;
}
.zami-demo-tabs {
  display:flex;align-items:center;gap:2px;width:max-content;max-width:100%;
  padding:4px;margin-bottom:13px;background:#edf3ed;border-radius:12px;
  font-size:10px;font-weight:830;color:#627767;
}
.zami-demo-tabs b {
  padding:7px 9px;border-radius:9px;background:white;
  color:#1e2b58;box-shadow:0 1px 3px #1e2b580c;
}
.zami-demo-tabs > span { padding:7px 9px;white-space:nowrap; }
.zami-demo-pending {
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:3px;color:#758091;font-weight:850;letter-spacing:.06em;font-size:9px;
}
.zami-phone .zami-demo-aisle {
  display:flex;justify-content:space-between;align-items:center;gap:5px;
  margin:9px 0 2px;padding:6px 7px;min-height:25px;
  background:#eef4ed;color:#1e2b58;font-size:10px;font-weight:850;
}
.zami-phone .zami-demo-aisle span { min-width:0; }
.zami-phone .zami-demo-aisle small {
  margin-left:auto;color:#61806e;font-size:9px;font-weight:850;
}
.zami-phone .zami-demo-aisle.dairy { background:#e8eff8;color:#1e2b58; }
.zami-phone .zami-demo-aisle.bakery { background:#f9eddf;color:#1e2b58; }
.zami-phone .zami-demo-item {
  gap:6px;padding:5px 3px;font-size:10.5px;line-height:1.1;min-height:22px;
}
.zami-phone .demo-checkbox { width:13px;height:13px; }
.zami-demo-bought {
  display:flex;align-items:center;justify-content:space-between;
  border-top:1px dashed #cbdacf;margin-top:9px;padding:8px 3px;
  color:#64806b;font-size:10px;font-weight:850;
}
.zami-demo-bought small {
  display:grid;place-items:center;width:19px;height:19px;
  background:#e9f0e9;border-radius:50%;font-size:9px;
}
@media (min-width: 731px) and (max-width: 1199px) {
  .zami-demo-head { margin-bottom:8px; }
  .zami-demo-tabs { margin-bottom:8px; }
  .zami-phone .zami-demo-aisle { margin-top:7px; }
  .zami-phone .zami-demo-item { min-height:20px;padding:4px 3px; }
}
@media (max-width:730px) {
  .zami-demo-head { margin:1px 0 6px;gap:3px; }
  .zami-demo-title { font-size:10.5px; }
  .zami-demo-shared { padding:4px 5px;font-size:6.5px; }
  .zami-demo-summary { font-size:8px;margin-bottom:5px; }
  .zami-demo-summary-left strong { font-size:19px; }
  .zami-demo-summary small { font-size:7px; }
  .zami-demo-track { height:4px;margin-bottom:7px; }
  .zami-demo-tabs { font-size:8px;padding:3px;margin-bottom:7px; }
  .zami-demo-tabs b,.zami-demo-tabs > span { padding:4px 5px; }
  .zami-demo-pending { font-size:8px;margin-bottom:1px; }
  .zami-phone .zami-demo-aisle {
    font-size:8px;min-height:19px;padding:4px 5px;margin:6px 0 2px;
  }
  .zami-phone .zami-demo-aisle small { font-size:8px; }
  .zami-phone .zami-demo-item {
    min-height:18px;padding:3px 2px;gap:4px;font-size:8.5px;
  }
  .zami-phone .demo-checkbox { width:11px;height:11px; }
  .zami-demo-extra { display:none; }
}
@media (max-width:385px) {
  .zami-demo-title { font-size:9.5px; }
  .zami-demo-shared { font-size:5.5px;padding:3px; }
  .zami-demo-summary-left strong { font-size:17px; }
  .zami-demo-summary { font-size:7px; }
  .zami-demo-summary small { font-size:6.5px; }
  .zami-demo-small-optional { display:none!important; }
}