@import "https://fonts.googleapis.com/css2?family=Permanent+Marker&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap";.app-root{--bg:#e4d4b0;--surface:#fbf5e9;--surface-2:#f1e4c8;--ink:#2a241d;--ink-soft:#6b5d46;--border:#c7ad7c;--red:#b8431b;--red-bg:#f6dfcf;--green:#4c7a52;--green-bg:#dcead9;--blue:#395670;--blue-bg:#dce6ed;--amber:#a66a16;--amber-bg:#f3e3c4;--radius:10px;--shadow:0 2px 6px #2a241d26;color:var(--ink);background:var(--bg);box-sizing:border-box;background-image:repeating-linear-gradient(135deg,#00000004 0 2px,#0000 2px 6px);min-height:100%;padding:18px 14px 60px;font-family:IBM Plex Sans,-apple-system,sans-serif}.app-root *{box-sizing:border-box}.wrap{max-width:780px;margin:0 auto}.header{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;padding:16px 18px;display:flex}.brand{align-items:center;gap:10px;display:flex}.brand h1{color:var(--red);letter-spacing:.5px;margin:0;font-family:Permanent Marker,cursive;font-size:22px;font-weight:400}.brand .icon-wrap{background:var(--amber-bg);color:var(--amber);border-radius:8px;justify-content:center;align-items:center;width:34px;height:34px;display:flex;transform:rotate(-6deg)}.date-block{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.date-input{border:1px dashed var(--border);background:var(--surface-2);color:var(--ink);border-radius:6px;padding:6px 8px;font-family:IBM Plex Mono,monospace;font-size:13px}.countdown{background:var(--red-bg);color:var(--red);border:1px solid var(--red);white-space:nowrap;border-radius:20px;padding:5px 12px;font-family:IBM Plex Mono,monospace;font-size:13px;font-weight:600;transform:rotate(-2deg)}.reset-btn{color:var(--ink-soft);cursor:pointer;background:0 0;border:none;padding:0;font-size:11px;text-decoration:underline}.tabs{gap:4px;margin-bottom:0;display:flex;overflow-x:auto}.tab{background:var(--surface-2);color:var(--ink-soft);border:1px solid var(--border);cursor:pointer;white-space:nowrap;border-bottom:none;border-radius:10px 10px 0 0;align-items:center;gap:6px;padding:10px 14px;font-family:IBM Plex Sans,sans-serif;font-size:13px;font-weight:600;transition:transform .15s,background .15s;display:flex;transform:translateY(2px)}.tab.active{background:var(--surface);color:var(--ink);transform:translateY(0);box-shadow:0 -2px 4px #2a241d0f}.tab .badge{background:#00000014;border-radius:10px;padding:1px 6px;font-family:IBM Plex Mono,monospace;font-size:10px}.panel{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:0 10px 10px;padding:18px}.empty{color:var(--ink-soft);border:1px dashed var(--border);text-align:center;border-radius:8px;padding:18px;font-size:13px}.add-panel{border-bottom:1px dashed var(--border);margin-bottom:16px;padding-bottom:16px}.add-row{flex-wrap:wrap;gap:8px;margin-bottom:10px;display:flex}.add-row input[type=text],.add-row select{border:1px solid var(--border);background:var(--surface-2);color:var(--ink);border-radius:6px;padding:8px 10px;font-family:IBM Plex Sans,sans-serif;font-size:13px}.add-row input[list]{min-width:130px}.add-row input[type=text]:not([list]){flex:1;min-width:160px}.suggestion-list{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:4px 10px;margin-bottom:10px;padding:10px;display:grid}.suggestion-row{align-items:center;gap:6px;padding:3px 0;display:flex}.suggestion-label{cursor:pointer;flex:1;font-size:12.5px}.qty-input{border:1px dashed var(--border);background:var(--surface);width:40px;color:var(--ink);border-radius:5px;padding:2px 4px;font-family:IBM Plex Mono,monospace;font-size:12px}.custom-item-row{gap:8px;margin-bottom:10px;display:flex}.custom-item-row input{border:1px solid var(--border);background:var(--surface-2);border-radius:6px;flex:1;padding:7px 10px;font-family:IBM Plex Sans,sans-serif;font-size:13px}.btn-add-sm{background:var(--surface-2);border:1px solid var(--border);cursor:pointer;color:var(--ink-soft);border-radius:6px;justify-content:center;align-items:center;padding:0 10px;display:flex}.pending-list{flex-wrap:wrap;gap:6px;margin-bottom:10px;display:flex}.pending-chip{background:var(--green-bg);color:var(--green);border:1px solid var(--green);border-radius:20px;align-items:center;gap:5px;padding:4px 6px 4px 10px;font-size:11.5px;display:flex}.pending-chip button{cursor:pointer;color:var(--green);background:0 0;border:none;display:flex}.toggle-chip{cursor:pointer;border:1px solid var(--border);background:var(--surface-2);color:var(--ink-soft);-webkit-user-select:none;user-select:none;border-radius:20px;padding:7px 12px;font-family:IBM Plex Sans,sans-serif;font-size:12px;font-weight:600}.toggle-chip.on.fragile{background:var(--red-bg);color:var(--red);border-color:var(--red)}.toggle-chip.on.priority{background:var(--amber-bg);color:var(--amber);border-color:var(--amber)}.btn-add{background:var(--ink);color:var(--surface);cursor:pointer;border:none;border-radius:6px;align-items:center;gap:6px;padding:8px 14px;font-family:IBM Plex Sans,sans-serif;font-size:13px;font-weight:600;display:flex}.search-row{align-items:center;gap:8px;margin-bottom:12px;display:flex}.search-row input{border:1px solid var(--border);background:var(--surface-2);border-radius:20px;flex:1;padding:7px 12px 7px 32px;font-family:IBM Plex Sans,sans-serif;font-size:13px}.search-wrap{flex:1;position:relative}.search-wrap svg{color:var(--ink-soft);position:absolute;top:50%;left:10px;transform:translateY(-50%)}.room-group{margin-bottom:14px}.room-head{color:var(--ink-soft);text-transform:uppercase;letter-spacing:.4px;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;font-family:IBM Plex Sans,sans-serif;font-size:13px;font-weight:600;display:flex}.room-head-label{cursor:pointer;align-items:center;gap:6px;display:flex}.code-input{text-align:center;text-transform:uppercase;letter-spacing:.5px;border:1px dashed var(--border);background:var(--surface-2);width:58px;color:var(--ink);border-radius:5px;padding:3px 4px;font-family:IBM Plex Mono,monospace;font-size:11px;font-weight:600}.carton-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;display:grid}.carton-card{background:var(--surface-2);border:1.5px dashed var(--border);border-radius:8px;padding:10px 10px 8px;position:relative;overflow:hidden}.carton-card:before{content:"";background:#ffffff8c;border:1px solid #0000000d;width:36px;height:14px;position:absolute;top:-6px;left:14px;transform:rotate(-4deg)}.carton-card.arrived{opacity:.55}.carton-num{color:var(--ink);font-family:IBM Plex Mono,monospace;font-size:13px;font-weight:600}.carton-content{color:var(--ink-soft);word-break:break-word;min-height:16px;margin:4px 0 8px;font-size:12.5px}.carton-tags{flex-wrap:wrap;gap:4px;margin-bottom:8px;display:flex}.stamp{cursor:pointer;border-radius:4px;padding:2px 6px;font-family:Permanent Marker,cursive;font-size:10px;display:inline-block}.stamp.fragile{color:var(--red);border:1.5px solid var(--red);transform:rotate(-3deg)}.stamp.priority{color:var(--amber);border:1.5px solid var(--amber);transform:rotate(2deg)}.carton-foot{justify-content:space-between;align-items:center;display:flex}.arrive-check{color:var(--green);cursor:pointer;align-items:center;gap:5px;font-size:11.5px;font-weight:600;display:flex}.arrive-check .box{border:1.5px solid var(--green);background:var(--surface);border-radius:3px;justify-content:center;align-items:center;width:15px;height:15px;display:flex}.del-btn{cursor:pointer;color:var(--ink-soft);opacity:.6;background:0 0;border:none}.del-btn:hover{opacity:1;color:var(--red)}.progress-bar-outer{background:var(--surface-2);border:1px solid var(--border);border-radius:6px;height:8px;margin-bottom:14px;overflow:hidden}.progress-bar-inner{background:var(--green);height:100%;transition:width .3s}.progress-label{color:var(--ink-soft);margin-bottom:6px;font-family:IBM Plex Mono,monospace;font-size:12px}.task-row{border-bottom:1px solid var(--surface-2);align-items:center;gap:10px;padding:8px 4px;font-size:13.5px;display:flex}.task-row.done .task-label{color:var(--ink-soft);text-decoration:line-through}.task-check{border:1.5px solid var(--ink-soft);cursor:pointer;background:var(--surface);border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;width:18px;height:18px;display:flex}.task-row.done .task-check{background:var(--green);border-color:var(--green);color:#fff}.task-label{flex:1}.section-title{text-transform:uppercase;letter-spacing:.4px;color:var(--blue);margin:18px 0 6px;font-family:IBM Plex Sans,sans-serif;font-size:13px;font-weight:700}.section-title:first-child{margin-top:0}.add-task-row{gap:8px;margin-top:12px;display:flex}.add-task-row input{border:1px solid var(--border);background:var(--surface-2);border-radius:6px;flex:1;padding:8px 10px;font-family:IBM Plex Sans,sans-serif;font-size:13px}.timeline{flex-direction:column;gap:0;display:flex}.milestone-row{border-left:3px solid var(--border);align-items:center;gap:10px;padding:10px 4px 10px 14px;display:flex;position:relative}.milestone-row.overdue{border-left-color:var(--red)}.milestone-row.done{border-left-color:var(--green)}.milestone-date{min-width:70px;color:var(--ink-soft);font-family:IBM Plex Mono,monospace;font-size:12px;font-weight:600}.milestone-row.overdue .milestone-date{color:var(--red)}.milestone-label{flex:1;font-size:13.5px}.milestone-row.done .milestone-label{color:var(--ink-soft);text-decoration:line-through}.milestone-days{color:var(--ink-soft);font-family:IBM Plex Mono,monospace;font-size:11px}.date-input-sm{border:1px dashed var(--border);background:var(--surface-2);border-radius:5px;width:118px;padding:3px 5px;font-family:IBM Plex Mono,monospace;font-size:12px}.loading-screen{min-height:200px;color:var(--ink-soft);justify-content:center;align-items:center;font-size:13px;display:flex}.login-screen{background:var(--bg);justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.login-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);text-align:center;width:100%;max-width:360px;padding:28px 24px}.login-card h1{color:var(--ink);margin:0 0 6px;font-family:Permanent Marker,cursive;font-size:26px}.login-card p{color:var(--ink-soft);margin:0 0 18px;font-size:13px}.login-input{width:100%;color:var(--ink);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px;padding:11px 12px;font-family:IBM Plex Sans,sans-serif;font-size:15px}.login-btn{width:100%;color:var(--surface);background:var(--ink);border-radius:var(--radius);cursor:pointer;border:none;padding:11px;font-family:IBM Plex Sans,sans-serif;font-size:15px;font-weight:600}.login-btn:disabled{opacity:.5;cursor:default}.login-error{color:var(--red);background:var(--red-bg);border-radius:var(--radius);margin-top:12px;padding:8px 10px;font-size:13px}.sync-banner{border-radius:var(--radius);align-items:center;gap:8px;margin-bottom:12px;padding:7px 12px;font-family:IBM Plex Mono,monospace;font-size:12px;display:flex}.sync-banner.offline{color:var(--amber);background:var(--amber-bg)}.sync-banner.syncing{color:var(--blue);background:var(--blue-bg)}.sync-banner.error{color:var(--red);background:var(--red-bg)}.pending-dot{background:var(--amber);vertical-align:middle;border-radius:50%;width:6px;height:6px;margin-left:6px;display:inline-block}