*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Nunito','PingFang SC','Microsoft YaHei',sans-serif;background:#f5f5f5;height:100vh;overflow:hidden;display:flex;flex-direction:column;}

/* ════════════════════════════════════════
   THEME CSS VARIABLES
   ════════════════════════════════════════ */
:root{
  --primary:#ffbc0d;
  --primary-dark:#d4900a;
  --primary-text:#1a1a1a;
  --primary-light:#fff9e6;
  --header-bg:#ffbc0d;
  --header-text:#1a1a1a;
  --header-sub:#7a5500;
  --header-badge-bg:#1a1a1a;
  --header-badge-text:#fff;
  --nav-active-bg:#fff9e6;
  --nav-active-border:#ffbc0d;
  --nav-active-label:#d4900a;
  --btn-bg:#ffbc0d;
  --btn-text:#1a1a1a;
  --cart-bar-bg:#1a1a1a;
  --cart-total-color:#ffbc0d;
  --section-sticky-bg:#fff;
}
body[data-theme="kfc"]{
  --primary:#e8001c;
  --primary-dark:#b5001a;
  --primary-text:#fff;
  --primary-light:#fff0f0;
  --header-bg:#e8001c;
  --header-text:#fff;
  --header-sub:#ffcccc;
  --header-badge-bg:#fff;
  --header-badge-text:#e8001c;
  --nav-active-bg:#fff0f0;
  --nav-active-border:#e8001c;
  --nav-active-label:#b5001a;
  --btn-bg:#e8001c;
  --btn-text:#fff;
  --cart-bar-bg:#b5001a;
  --cart-total-color:#ffcccc;
}
body[data-theme="walmart"]{
  --primary:#0071ce;
  --primary-dark:#005da8;
  --primary-text:#fff;
  --primary-light:#e8f4ff;
  --header-bg:#0071ce;
  --header-text:#fff;
  --header-sub:#b8d9f5;
  --header-badge-bg:#ffc220;
  --header-badge-text:#1a1a1a;
  --nav-active-bg:#e8f4ff;
  --nav-active-border:#0071ce;
  --nav-active-label:#005da8;
  --btn-bg:#0071ce;
  --btn-text:#fff;
  --cart-bar-bg:#005da8;
  --cart-total-color:#ffc220;
}
body[data-theme="starbucks"]{
  --primary:#00704a;
  --primary-dark:#005a3a;
  --primary-text:#fff;
  --primary-light:#e6f5ef;
  --header-bg:#00704a;
  --header-text:#fff;
  --header-sub:#a8d5c2;
  --header-badge-bg:#cba258;
  --header-badge-text:#fff;
  --nav-active-bg:#e6f5ef;
  --nav-active-border:#00704a;
  --nav-active-label:#005a3a;
  --btn-bg:#00704a;
  --btn-text:#fff;
  --cart-bar-bg:#005a3a;
  --cart-total-color:#cba258;
}

/* ── Header ── */
#header{background:var(--header-bg);padding:18px 18px 14px;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,0.16);z-index:20;transition:background 0.3s;}
.header-brand{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.header-logo{font-size:30px;line-height:1;}
.header-name{font-size:26px;font-weight:900;color:var(--header-text);letter-spacing:1px;line-height:1.1;transition:color 0.3s;}
.theme-switch-btn{
  background:rgba(255,255,255,0.22);
  border:1.5px solid rgba(255,255,255,0.4);
  border-radius:50%;width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:15px;color:var(--header-text);
  transition:all 0.2s;flex-shrink:0;margin-left:2px;
}
.theme-switch-btn:active{transform:scale(0.88);}
.header-tagline{font-size:11px;font-weight:700;color:var(--header-sub);letter-spacing:0.5px;transition:color 0.3s;}
.header-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:8px;}
.header-date{font-size:12px;font-weight:800;color:var(--header-sub);background:rgba(0,0,0,0.1);border-radius:12px;padding:4px 10px;transition:color 0.3s;}
.header-open-badge{font-size:11px;font-weight:900;color:var(--header-badge-text);background:var(--header-badge-bg);border-radius:12px;padding:4px 10px;letter-spacing:0.5px;transition:all 0.3s;}

/* ── Theme picker sheet ── */
#theme-sheet{
  position:fixed;inset:0;z-index:300;
  display:flex;align-items:flex-end;
  background:rgba(0,0,0,0);
  pointer-events:none;
  transition:background 0.25s;
}
#theme-sheet.show{background:rgba(0,0,0,0.45);pointer-events:all;}
.theme-panel{
  background:#fff;border-radius:22px 22px 0 0;
  width:100%;padding:20px 16px 32px;
  transform:translateY(100%);transition:transform 0.3s cubic-bezier(.4,0,.2,1);
}
#theme-sheet.show .theme-panel{transform:translateY(0);}
.theme-panel-title{font-size:16px;font-weight:900;color:#1a1a1a;margin-bottom:16px;text-align:center;}
.theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.theme-option{
  border:2px solid #eee;border-radius:16px;
  padding:14px 12px;cursor:pointer;
  display:flex;align-items:center;gap:10px;
  transition:all 0.15s;
}
.theme-option:active{transform:scale(0.97);}
.theme-option.selected{border-width:2.5px;}
.theme-dot{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:20px;}
.theme-info{}
.theme-brand{font-size:13px;font-weight:900;color:#1a1a1a;}
.theme-tag{font-size:10px;font-weight:700;color:#aaa;margin-top:1px;}

/* ── Body layout ── */
#body{display:flex;flex:1;overflow:hidden;}

/* ── Left sidebar ── */
#sidebar{width:72px;min-width:72px;background:#fff;border-right:1px solid #f0f0f0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;}
#sidebar::-webkit-scrollbar{display:none;}
.nav-item{display:flex;flex-direction:column;align-items:center;padding:11px 4px;cursor:pointer;border-left:3px solid transparent;transition:all 0.15s;}
.nav-item.active{background:var(--nav-active-bg);border-left-color:var(--nav-active-border);}
.nav-item.active .nav-label{color:var(--nav-active-label);font-weight:900;}
.nav-food-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:4px;position:relative;}
.nav-badge{position:absolute;top:-4px;right:-4px;background:#ff4444;color:#fff;font-size:9px;font-weight:900;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 3px;}
.nav-label{font-size:10px;font-weight:700;color:#888;text-align:center;line-height:1.2;}
.nav-divider{height:1px;background:#f0f0f0;margin:2px 8px;}
.nav-item.completed-nav.active{background:#f0f0f0;border-left-color:#888;}
.nav-item.completed-nav.active .nav-label{color:#444;font-weight:900;}

/* ── Main ── */
#main{flex:1;overflow-y:auto;background:#f5f5f5;}
#main::-webkit-scrollbar{width:3px;}
#main::-webkit-scrollbar-thumb{background:#ddd;border-radius:2px;}

.section{background:#fff;margin-bottom:8px;}
.section-header{padding:12px 14px 8px;font-size:14px;font-weight:900;color:#1a1a1a;display:flex;align-items:center;gap:8px;border-bottom:1px solid #f5f5f5;position:sticky;top:0;background:#fff;z-index:5;}
.section-badge{background:var(--btn-bg);color:var(--btn-text);font-size:10px;font-weight:900;padding:2px 7px;border-radius:10px;transition:all 0.3s;}
.add-section-btn{margin-left:auto;background:var(--btn-bg);color:var(--btn-text);border:none;border-radius:14px;padding:4px 10px;font-size:12px;font-weight:900;cursor:pointer;font-family:inherit;transition:all 0.3s;}

.card-wrap{position:relative;overflow:hidden;border-bottom:1px solid #f5f5f5;background:#fff;}
.card-actions-bg{position:absolute;right:0;top:0;bottom:0;width:144px;display:flex;z-index:1;opacity:0;pointer-events:none;transition:opacity 0.1s;}
.card-actions-bg.visible{opacity:1;pointer-events:all;}
.card-action-edit{flex:1;background:#555;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;gap:3px;}
.card-action-delete{flex:1;background:var(--btn-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;gap:3px;}
.card-action-edit span,.card-action-delete span{font-size:22px;line-height:1;}
.card-action-label{font-size:10px;font-weight:800;color:#fff;}
.card-action-delete .card-action-label{color:var(--btn-text);}

.task-card{display:flex;padding:14px 14px 14px 0;position:relative;align-items:flex-start;background:#fff;transition:transform 0.22s ease;z-index:2;will-change:transform;}
.task-card.completing .food-img,.task-card.completing .task-name,.task-card.completing .task-desc,.task-card.completing .task-ddl,.task-card.completing .add-btn{transition:opacity 0.2s;opacity:0.15;}
.task-card.done .food-img{opacity:0.3;filter:grayscale(80%);}
.task-card.done .task-name{color:#ccc;text-decoration:line-through;}
.task-card.done .task-desc,.task-card.done .task-ddl{color:#ddd;}
.task-card.swiped{transform:translateX(-144px);}

/* ── Edit modal ── */
#edit-modal{position:fixed;inset:0;z-index:400;display:flex;align-items:flex-end;background:rgba(0,0,0,0);pointer-events:none;transition:background 0.25s;}
#edit-modal.show{background:rgba(0,0,0,0.5);pointer-events:all;}
.edit-panel{background:#fff;border-radius:22px 22px 0 0;width:100%;padding:20px 16px 32px;transform:translateY(100%);transition:transform 0.3s cubic-bezier(.4,0,.2,1);}
#edit-modal.show .edit-panel{transform:translateY(0);}
.edit-panel-title{font-size:15px;font-weight:900;color:#1a1a1a;margin-bottom:14px;}
.edit-input{width:100%;border:1.5px solid var(--primary);border-radius:10px;padding:10px 12px;font-size:16px;font-weight:700;font-family:inherit;outline:none;background:#fff;margin-bottom:8px;transition:border-color 0.3s;}
.edit-btns{display:flex;gap:8px;margin-top:4px;}
.edit-ok{background:var(--btn-bg);color:var(--btn-text);border:none;border-radius:20px;padding:9px 22px;font-size:13px;font-weight:900;cursor:pointer;font-family:inherit;transition:all 0.3s;}
.edit-cancel{background:#eee;color:#888;border:none;border-radius:20px;padding:9px 18px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;}

.food-img-wrap{width:106px;min-width:106px;height:88px;padding:0 8px;display:flex;align-items:center;justify-content:center;}
.food-img{width:90px;height:76px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:44px;}
.task-info{flex:1;padding-right:40px;}
.task-name{font-size:14px;font-weight:800;color:#1a1a1a;line-height:1.3;margin-bottom:3px;}
.task-desc{font-size:11px;color:#aaa;font-weight:600;margin-bottom:7px;line-height:1.4;}
.task-ddl{font-size:15px;font-weight:900;color:#1a1a1a;}
.add-btn{position:absolute;bottom:14px;right:14px;width:30px;height:30px;border-radius:50%;background:var(--btn-bg);color:var(--btn-text);border:none;font-size:22px;font-weight:900;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform 0.15s, background 0.3s;line-height:1;font-family:inherit;}
.add-btn:active{transform:scale(0.85);}
.add-btn.done-btn{background:#f0f0f0;color:#ccc;cursor:default;font-size:16px;}

.completed-count-badge{background:#888;color:#fff;font-size:10px;font-weight:900;padding:2px 7px;border-radius:10px;}
.completed-task-card{display:flex;padding:12px 14px 12px 0;border-bottom:1px solid #f5f5f5;position:relative;align-items:center;}
.completed-food-wrap{width:56px;min-width:56px;height:52px;padding:0 8px;display:flex;align-items:center;justify-content:center;}
.completed-food-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:22px;opacity:0.35;filter:grayscale(80%);}
.completed-task-info{flex:1;}
.completed-task-name{font-size:13px;font-weight:800;color:#bbb;text-decoration:line-through;margin-bottom:2px;}
.completed-task-meta{font-size:10px;color:#ccc;font-weight:600;}
.restore-btn{position:absolute;right:14px;background:none;border:1.5px solid #e0e0e0;border-radius:10px;padding:4px 10px;font-size:11px;font-weight:800;color:#aaa;cursor:pointer;font-family:inherit;}
.restore-btn:hover{border-color:var(--primary);color:var(--primary-dark);}

.add-form-wrap{display:none;}

/* ── Add task bottom sheet ── */
#add-sheet{
  position:fixed;inset:0;z-index:400;
  display:flex;align-items:flex-end;
  background:rgba(0,0,0,0);pointer-events:none;
  transition:background 0.25s;
}
#add-sheet.show{background:rgba(0,0,0,0.45);pointer-events:all;}
.add-sheet-panel{
  background:#fff;border-radius:22px 22px 0 0;
  width:100%;padding:20px 16px 0;
  transform:translateY(100%);transition:transform 0.3s cubic-bezier(.4,0,.2,1);
  padding-bottom:env(safe-area-inset-bottom);
}
#add-sheet.show .add-sheet-panel{transform:translateY(0);}
.add-sheet-header{display:flex;align-items:center;margin-bottom:14px;}
.add-sheet-title{font-size:15px;font-weight:900;color:#1a1a1a;flex:1;}
.add-sheet-close{background:none;border:none;font-size:22px;cursor:pointer;color:#aaa;padding:0;}
.add-sheet-cat{display:flex;align-items:center;gap:6px;margin-bottom:12px;}
.add-sheet-cat-dot{width:10px;height:10px;border-radius:50%;}
.add-sheet-cat-name{font-size:12px;font-weight:800;color:#888;}
.add-sheet-input{width:100%;border:none;border-bottom:2px solid var(--primary);background:none;font-size:16px;font-weight:700;font-family:inherit;outline:none;padding:6px 0;margin-bottom:12px;transition:border-color 0.3s;}
.add-sheet-btns{display:flex;gap:8px;padding:12px 0 20px;}
.add-sheet-ok{flex:1;background:var(--btn-bg);color:var(--btn-text);border:none;border-radius:20px;padding:12px;font-size:14px;font-weight:900;cursor:pointer;font-family:inherit;transition:all 0.3s;}
.add-sheet-cancel{background:#f0f0f0;color:#888;border:none;border-radius:20px;padding:12px 20px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;}

#cart-bar{background:var(--cart-bar-bg);padding:10px 16px;display:flex;align-items:center;gap:12px;flex-shrink:0;z-index:20;cursor:pointer;transition:background 0.3s, transform 0.15s;}
#cart-bar.hidden{display:none;}
#cart-bar:active{transform:scale(0.98);}
.cart-count-badge{position:absolute;top:-6px;right:-8px;background:var(--primary);color:var(--primary-text);font-size:10px;font-weight:900;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 3px;transition:all 0.3s;}
.cart-total{font-size:18px;font-weight:900;color:var(--cart-total-color);transition:color 0.3s;}
.cart-hint{font-size:11px;color:#aaa;font-weight:600;}
.checkout-btn{background:var(--primary);color:var(--primary-text);border:none;border-radius:24px;padding:10px 22px;font-size:14px;font-weight:900;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all 0.3s;}

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:100;display:flex;align-items:flex-end;opacity:0;pointer-events:none;transition:opacity 0.25s;}
.modal-overlay.show{opacity:1;pointer-events:all;}
.modal-sheet{background:#fff;border-radius:20px 20px 0 0;width:100%;max-height:80vh;overflow-y:auto;transform:translateY(100%);transition:transform 0.3s;padding-bottom:24px;}
.modal-overlay.show .modal-sheet{transform:translateY(0);}
.modal-header{padding:16px 16px 12px;display:flex;align-items:center;border-bottom:1px solid #f0f0f0;position:sticky;top:0;background:#fff;z-index:1;}
.modal-title{font-size:17px;font-weight:900;color:#1a1a1a;flex:1;}
.modal-close{background:none;border:none;font-size:22px;cursor:pointer;color:#999;padding:0;}
.cart-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid #f5f5f5;}
.cart-item-icon{font-size:28px;width:40px;text-align:center;}
.cart-item-info{flex:1;}
.cart-item-name{font-size:14px;font-weight:800;color:#1a1a1a;}
.cart-item-cat{font-size:11px;color:#aaa;font-weight:600;margin-top:2px;}
.cart-item-price{font-size:14px;font-weight:900;color:#1a1a1a;}
.cart-footer{padding:16px 16px 0;}
.place-order-btn{width:100%;background:var(--btn-bg);color:var(--btn-text);border:none;border-radius:28px;padding:14px;font-size:16px;font-weight:900;cursor:pointer;font-family:inherit;transition:all 0.3s;}
.empty-hint{padding:24px;text-align:center;color:#ccc;font-size:13px;font-weight:700;line-height:2;}

/* ══ RECEIPT ══ */
#receipt-page{position:fixed;inset:0;z-index:200;background:#c0c0c0;display:flex;flex-direction:column;transform:translateY(100%);transition:transform 0.35s cubic-bezier(.4,0,.2,1);}
#receipt-page.show{transform:translateY(0);}
.receipt-topbar{background:#1a1a1a;color:#fff;padding:14px 16px;display:flex;align-items:center;gap:12px;flex-shrink:0;}
.receipt-back-btn{background:none;border:none;color:#fff;font-size:24px;cursor:pointer;padding:0;line-height:1;}
.receipt-topbar-title{font-size:16px;font-weight:900;flex:1;}
.receipt-hint{font-size:11px;color:#888;font-weight:600;}
.receipt-scroll{flex:1;overflow-y:auto;padding:20px 16px 40px;display:flex;justify-content:center;align-items:flex-start;}
.receipt-scroll::-webkit-scrollbar{display:none;}
.receipt-paper{background:#faf8f2;width:100%;max-width:320px;font-family:'Courier New',monospace;box-shadow:0 6px 32px rgba(0,0,0,0.25),0 2px 6px rgba(0,0,0,0.12);}
.torn-edge-top{display:block;width:100%;height:18px;background-image:radial-gradient(circle at 9px 0px,#c0c0c0 8px,transparent 8px);background-size:18px 18px;background-repeat:repeat-x;background-color:#faf8f2;}
.torn-edge-bottom{display:block;width:100%;height:18px;background-image:radial-gradient(circle at 9px 18px,#c0c0c0 8px,transparent 8px);background-position:0 0;background-size:18px 18px;background-repeat:repeat-x;background-color:#faf8f2;}
.r-inner{padding:2px 20px 20px;}
.r-store-block{text-align:center;padding:14px 0 10px;border-bottom:3px double #888;margin-bottom:8px;}
.r-store-name{font-size:22px;font-weight:900;color:#1a1a1a;letter-spacing:4px;font-family:'Courier New',monospace;display:block;margin-bottom:4px;}
.r-store-sub{font-size:10px;color:#777;letter-spacing:2px;display:block;margin-bottom:3px;}
.r-store-addr{font-size:9px;color:#aaa;letter-spacing:1px;display:block;}
.r-line{border:none;border-top:1px dashed #bbb;margin:7px 0;}
.r-line-solid{border:none;border-top:1px solid #888;margin:7px 0;}
.r-line-double{border-top:3px double #888;margin:7px 0;border-bottom:none;}
.r-info-row{display:flex;justify-content:space-between;font-size:10px;color:#555;line-height:2.0;}
.r-label{color:#999;}
.r-col-head{display:flex;font-size:9px;color:#888;padding:4px 0 2px;gap:4px;letter-spacing:0.5px;}
.r-c-no{width:22px;flex-shrink:0;}.r-c-name{flex:1;}.r-c-qty{width:24px;text-align:center;flex-shrink:0;}.r-c-price{width:48px;text-align:right;flex-shrink:0;}
.r-item{display:flex;font-size:11px;color:#222;padding:4px 0;gap:4px;align-items:flex-start;border-bottom:1px dotted #ddd;}
.r-i-no{width:22px;flex-shrink:0;color:#bbb;font-size:9px;padding-top:2px;}.r-i-name{flex:1;font-weight:700;line-height:1.4;word-break:break-all;}.r-i-qty{width:24px;text-align:center;flex-shrink:0;color:#555;}.r-i-price{width:48px;text-align:right;flex-shrink:0;font-weight:700;}
.r-total-section{padding:6px 0 2px;}
.r-total-row{display:flex;justify-content:space-between;align-items:baseline;padding:2px 0;}
.r-tl{font-size:11px;color:#555;}.r-tv{font-size:11px;font-weight:700;color:#333;}
.r-grand-row{display:flex;justify-content:space-between;align-items:baseline;padding:4px 0;}
.r-grand-label{font-size:16px;font-weight:900;color:#1a1a1a;letter-spacing:1px;}.r-grand-val{font-size:20px;font-weight:900;color:#1a1a1a;}
.r-motto{font-size:10px;color:#888;text-align:center;line-height:1.9;padding:8px 0 4px;letter-spacing:0.5px;white-space:pre-line;}
.r-barcode-wrap{text-align:center;padding:10px 0 6px;}
.r-barcode-num{font-size:9px;color:#aaa;letter-spacing:2px;margin-top:4px;}
.r-thanks{text-align:center;font-size:10px;color:#aaa;padding:4px 0 6px;letter-spacing:2px;}

/* ── Auth overlay ── */
#auth-overlay{position:fixed;inset:0;z-index:1000;background:#ffbc0d;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 24px;transition:opacity 0.3s;}
#auth-overlay.hidden{opacity:0;pointer-events:none;}
.auth-logo{font-size:56px;margin-bottom:8px;}
.auth-title{font-size:28px;font-weight:900;color:#1a1a1a;margin-bottom:4px;letter-spacing:1px;}
.auth-sub{font-size:13px;font-weight:700;color:#7a5500;margin-bottom:32px;}
.auth-card{background:#fff;border-radius:20px;padding:24px 20px;width:100%;max-width:360px;box-shadow:0 8px 32px rgba(0,0,0,0.13);}
.auth-tab-row{display:flex;border-radius:12px;overflow:hidden;background:#f5f5f5;margin-bottom:20px;}
.auth-tab{flex:1;padding:9px;font-size:13px;font-weight:800;border:none;background:none;cursor:pointer;font-family:inherit;color:#aaa;transition:all 0.2s;}
.auth-tab.active{background:#ffbc0d;color:#1a1a1a;border-radius:10px;}
.auth-input{width:100%;border:1.5px solid #e0e0e0;border-radius:10px;padding:12px 14px;font-size:16px;font-weight:700;font-family:inherit;outline:none;background:#fff;margin-bottom:10px;transition:border-color 0.2s;}
.auth-input:focus{border-color:#ffbc0d;}
.auth-submit{width:100%;background:#ffbc0d;color:#1a1a1a;border:none;border-radius:28px;padding:14px;font-size:15px;font-weight:900;cursor:pointer;font-family:inherit;margin-top:4px;transition:opacity 0.2s;}
.auth-submit:active{opacity:0.8;}
.auth-error{font-size:12px;font-weight:700;color:#e8001c;text-align:center;margin-top:10px;min-height:18px;}

/* ── Game-style loading screen ── */
#loading-overlay{
  position:fixed;inset:0;z-index:900;
  background:#1a1a1a;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity 0.4s;
  gap:0;
}
#loading-overlay.hidden{opacity:0;pointer-events:none;}
.loading-bg-dots{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;
}
.loading-bg-dots span{
  position:absolute;font-size:28px;opacity:0.07;
  animation:floatDot 6s infinite linear;
}
@keyframes floatDot{
  0%{transform:translateY(0) rotate(0deg);}
  100%{transform:translateY(-110vh) rotate(360deg);}
}
.loading-logo{font-size:80px;margin-bottom:16px;animation:logoBounce 0.8s infinite alternate ease-in-out;}
@keyframes logoBounce{0%{transform:scale(1) translateY(0);}100%{transform:scale(1.12) translateY(-8px);}}
.loading-title{font-size:28px;font-weight:900;color:#fff;letter-spacing:2px;margin-bottom:6px;}
.loading-subtitle{font-size:13px;font-weight:700;color:#ffbc0d;letter-spacing:1px;margin-bottom:36px;}
.loading-bar-wrap{
  width:220px;height:10px;background:#333;border-radius:10px;overflow:hidden;margin-bottom:14px;
}
.loading-bar-fill{
  height:100%;width:0%;background:linear-gradient(90deg,#ffbc0d,#ff8c00);
  border-radius:10px;
  animation:loadBar 2.2s ease-in-out infinite;
}
@keyframes loadBar{
  0%{width:0%;}60%{width:85%;}80%{width:90%;}100%{width:100%;}
}
.loading-tip{font-size:12px;font-weight:700;color:#555;letter-spacing:0.5px;text-align:center;padding:0 32px;}

button:focus{outline:none;}
input:focus{outline:none;}

/* ── Importance slider ── */
.importance-row{margin-bottom:14px;}
.importance-label-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.importance-label-text{font-size:12px;font-weight:800;color:#888;}
.importance-value-text{font-size:11px;font-weight:700;color:#aaa;transition:color 0.2s;}
.importance-range{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:34px;
  border-radius:17px;
  outline:none;
  cursor:pointer;
  transition:background 0.08s;
  display:block;
}
.importance-range::-webkit-slider-runnable-track{
  height:34px;
  border-radius:17px;
}
.importance-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:28px;
  height:28px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,0.22);
  cursor:pointer;
  margin-top:3px;
  border:2px solid rgba(255,255,255,0.9);
}
.importance-range::-moz-range-track{
  height:34px;
  border-radius:17px;
  border:none;
}
.importance-range::-moz-range-thumb{
  width:28px;
  height:28px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,0.22);
  cursor:pointer;
  border:2px solid rgba(255,255,255,0.9);
}