:root{
    --cream:#f0ebe0;
    --brown:#5c3d1e;
    --caramel:#c87941;
    --warm:#fdf6ec;
    --text:#4a2e15;
    --muted:rgba(74,46,21,0.55);
    --line:rgba(92,61,30,0.10);
    --line-strong:rgba(92,61,30,0.18);
    --bg:#ebe5d6;
    --green:#5b8a4e;
    --amber:#d4a04c;
    --red:#b85c4a;
    --gold:#bf8a30;
  }
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{height:100%;background:var(--warm);font-family:'Noto Serif TC',serif;color:var(--text);}
  body{display:flex;flex-direction:column;min-height:100vh;}

  /* ─── 螢幕容器 ─── */
  .screen{display:none;flex-direction:column;flex:1;animation:fadeIn 0.22s ease both;}
  .screen.active{display:flex;}
  @keyframes fadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

  /* ─── Header ─── */
  .app-header{padding:1rem 1.2rem 1rem;background:var(--warm);flex-shrink:0;}
  .app-header.with-back{padding:0.7rem 1.2rem 0.8rem;}
  .app-title{font-family:'Cormorant Garant','Noto Serif TC',serif;font-size:1.65rem;font-weight:700;color:var(--brown);letter-spacing:0.01em;line-height:1;}
  .app-sub{font-size:0.78rem;color:var(--caramel);font-weight:600;letter-spacing:0.18em;text-transform:uppercase;margin-top:0.35rem;}
  .header-row{display:flex;align-items:center;justify-content:space-between;}
  .back-btn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:white;border-radius:50%;border:1px solid var(--line);color:var(--brown);font-size:1.1rem;cursor:pointer;}
  .header-title{font-family:'Cormorant Garant','Noto Serif TC',serif;font-size:1.2rem;font-weight:700;color:var(--brown);}
  .avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--caramel),var(--brown));display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:0.85rem;}

  /* ─── Body / scroll ─── */
  .body{flex:1;overflow-y:auto;padding:0.6rem 1.2rem 6rem;-webkit-overflow-scrolling:touch;}

  /* ─── Bottom tab bar ─── */
  .tab-bar{position:fixed;bottom:0;left:0;right:0;max-width:480px;margin:0 auto;background:white;border-top:1px solid var(--line);padding:0.6rem 0 0.85rem;display:grid;grid-template-columns:repeat(4,1fr);z-index:100;}
  .tab-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.2rem;cursor:pointer;color:var(--muted);transition:color 0.2s;font-size:0.68rem;letter-spacing:0.02em;font-weight:600;padding-top:0.1rem;}
  .tab-item.active{color:var(--brown);}
  .tab-icon{font-size:1.3rem;line-height:1;}
  .tab-item.active .tab-icon{transform:scale(1.08);}

  /* ─── Common cards ─── */
  .card{background:white;border-radius:18px;padding:1.1rem 1.1rem;margin-bottom:0.7rem;border:1px solid var(--line);}
  .card-hero{background:linear-gradient(135deg,var(--brown) 0%,#7a5530 100%);color:white;border:0;padding:1.4rem 1.3rem;border-radius:22px;margin-bottom:0.9rem;position:relative;overflow:hidden;}
  .card-hero::after{content:"";position:absolute;right:-30px;top:-30px;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,0.06);}
  .card-hero::before{content:"";position:absolute;right:30px;bottom:-50px;width:90px;height:90px;border-radius:50%;background:rgba(255,255,255,0.04);}
  .hero-label{font-size:0.7rem;letter-spacing:0.22em;text-transform:uppercase;opacity:0.7;font-weight:600;margin-bottom:0.3rem;}
  .hero-value{font-family:'Cormorant Garant','Noto Serif TC',serif;font-size:2.3rem;font-weight:700;letter-spacing:0.01em;line-height:1.05;}
  .hero-meta{font-size:0.82rem;opacity:0.85;margin-top:0.45rem;}
  .hero-stats{display:flex;gap:1.4rem;margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,0.18);position:relative;z-index:1;}
  .hero-stat{flex:1;}
  .hero-stat-label{font-size:0.68rem;opacity:0.7;letter-spacing:0.1em;margin-bottom:0.15rem;}
  .hero-stat-value{font-family:'Cormorant Garant',serif;font-size:1.15rem;font-weight:700;}

  /* ─── Alert banner ─── */
  .alert-banner{background:linear-gradient(135deg,#fff3dd 0%,#f9e3b8 100%);border:1.5px solid rgba(212,160,76,0.4);border-radius:14px;padding:0.8rem 1rem;margin-bottom:0.7rem;display:flex;align-items:center;gap:0.6rem;cursor:pointer;}
  .alert-icon{font-size:1.3rem;}
  .alert-text{flex:1;font-size:0.85rem;font-weight:600;color:#7a5520;}
  .alert-arrow{color:var(--caramel);font-size:1rem;}

  /* ─── Section title ─── */
  .section-title{display:flex;align-items:baseline;justify-content:space-between;margin:1.2rem 0 0.6rem;padding:0 0.2rem;}
  .section-title h3{font-family:'Cormorant Garant','Noto Serif TC',serif;font-size:1.1rem;font-weight:700;color:var(--brown);}
  .section-title .more{font-size:0.78rem;color:var(--caramel);font-weight:600;cursor:pointer;}

  /* ─── Booking row ─── */
  .booking{background:white;border-radius:16px;padding:0.95rem 1.05rem;margin-bottom:0.55rem;border:1px solid var(--line);cursor:pointer;transition:transform 0.15s;display:flex;align-items:center;gap:0.85rem;}
  .booking:active{transform:scale(0.985);}
  .b-time{font-family:'Cormorant Garant',serif;font-size:1.05rem;font-weight:700;color:var(--brown);min-width:48px;text-align:center;line-height:1;}
  .b-time-sub{font-size:0.62rem;color:var(--muted);font-weight:600;letter-spacing:0.1em;margin-top:0.18rem;display:block;}
  .b-info{flex:1;min-width:0;}
  .b-pet{font-weight:700;font-size:0.95rem;color:var(--text);margin-bottom:0.18rem;line-height:1.2;}
  .b-pet .b-breed{color:var(--muted);font-weight:400;font-size:0.82rem;margin-left:0.3rem;}
  .b-service{font-size:0.75rem;color:var(--muted);}
  .b-right{display:flex;flex-direction:column;align-items:flex-end;gap:0.3rem;flex-shrink:0;}
  .b-price{font-family:'Cormorant Garant',serif;font-size:1rem;font-weight:700;color:var(--brown);}

  /* ─── Pills ─── */
  .pill{display:inline-block;font-size:0.66rem;font-weight:700;padding:0.18rem 0.55rem;border-radius:50px;letter-spacing:0.05em;}
  .pill-pending{background:#fff3dd;color:#a07020;}
  .pill-doing{background:#dceaf4;color:#3a6789;}
  .pill-done{background:#dde9d5;color:#406030;}
  .pill-cancel{background:#f0e0dc;color:#955040;}
  .pill-vip{background:#f5e9d2;color:#8a6f30;}

  /* ─── Floating action button ─── */
  .fab{position:fixed;bottom:88px;right:18px;max-width:calc(50% - 50px);width:54px;height:54px;border-radius:50%;background:var(--brown);color:white;border:0;display:flex;align-items:center;justify-content:center;font-size:1.7rem;cursor:pointer;box-shadow:0 8px 24px rgba(92,61,30,0.35);z-index:50;font-weight:300;line-height:1;}
  .fab:active{transform:scale(0.94);}

  /* ─── Detail page hero ─── */
  .detail-hero{background:white;padding:1.5rem 1.3rem;border-radius:20px;margin-bottom:1rem;border:1px solid var(--line);text-align:center;}
  .detail-pet{font-family:'Cormorant Garant','Noto Serif TC',serif;font-size:1.7rem;font-weight:700;color:var(--brown);margin-bottom:0.3rem;}
  .detail-breed{font-size:0.85rem;color:var(--muted);margin-bottom:0.8rem;}
  .detail-service-row{display:flex;justify-content:center;gap:0.4rem;flex-wrap:wrap;}
  .tag{display:inline-block;background:var(--warm);color:var(--brown);padding:0.32rem 0.85rem;border-radius:50px;font-size:0.76rem;font-weight:600;}

  /* ─── Info rows ─── */
  .info-row{display:flex;align-items:center;padding:0.85rem 0;border-bottom:1px solid var(--line);}
  .info-row:last-child{border-bottom:0;}
  .info-label{flex-shrink:0;width:80px;font-size:0.78rem;color:var(--muted);letter-spacing:0.08em;font-weight:600;}
  .info-value{flex:1;font-size:0.92rem;color:var(--text);font-weight:500;}
  .info-value a{color:var(--caramel);text-decoration:none;}

  /* ─── Payment method selector ─── */
  .pay-section{background:white;border-radius:18px;padding:1.1rem 1.05rem;margin:0.9rem 0 0.7rem;border:1px solid var(--line);}
  .pay-section-title{font-size:0.72rem;color:var(--caramel);letter-spacing:0.22em;font-weight:700;text-transform:uppercase;margin-bottom:0.7rem;}
  .pay-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0.45rem;}
  .pay-btn{background:var(--warm);border:1.5px solid transparent;border-radius:12px;padding:0.7rem 0.3rem;cursor:pointer;text-align:center;transition:all 0.15s;font-family:inherit;}
  .pay-btn-icon{font-size:1.4rem;display:block;margin-bottom:0.15rem;}
  .pay-btn-label{font-size:0.72rem;font-weight:600;color:var(--text);}
  .pay-btn.selected{background:var(--brown);border-color:var(--brown);}
  .pay-btn.selected .pay-btn-label{color:white;}
  .pay-btn.disabled{opacity:0.4;cursor:not-allowed;}
  .pay-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0.45rem;margin-top:0.45rem;}
  .pay-btn-wide{padding:0.7rem 0.5rem;}
  .pay-btn-wide .pay-meta{font-size:0.65rem;color:var(--caramel);margin-top:0.15rem;font-weight:600;}
  .pay-btn-wide.selected .pay-meta{color:rgba(255,255,255,0.85);}

  /* ─── Price panel ─── */
  .price-panel{background:linear-gradient(135deg,#fdf6ec 0%,#f5e9d2 100%);border-radius:18px;padding:1.2rem 1.1rem;margin-bottom:0.7rem;border:1.5px solid rgba(200,121,65,0.18);}
  .price-row{display:flex;justify-content:space-between;align-items:baseline;padding:0.3rem 0;}
  .price-row-label{font-size:0.82rem;color:var(--text);}
  .price-row-value{font-family:'Cormorant Garant',serif;font-size:1.05rem;font-weight:700;color:var(--brown);}
  .price-row.total{border-top:1px solid var(--line-strong);padding-top:0.55rem;margin-top:0.4rem;}
  .price-row.total .price-row-label{font-weight:700;font-size:0.9rem;}
  .price-row.total .price-row-value{font-size:1.5rem;}
  .price-row.discount .price-row-value{color:var(--green);}

  /* ─── Buttons ─── */
  .btn-primary{display:block;width:100%;background:var(--brown);color:white;padding:1.05rem;border-radius:16px;border:0;font-family:inherit;font-size:1rem;font-weight:700;letter-spacing:0.08em;cursor:pointer;box-shadow:0 5px 16px rgba(92,61,30,0.22);}
  .btn-primary:active{transform:scale(0.98);}
  .btn-primary:disabled{opacity:0.5;cursor:not-allowed;transform:none;}
  .btn-primary.danger{background:var(--red);box-shadow:0 5px 16px rgba(184,92,74,0.22);}
  .btn-secondary{display:block;width:100%;background:transparent;color:var(--brown);padding:0.95rem;border-radius:16px;border:1.5px solid var(--line-strong);font-family:inherit;font-size:0.92rem;font-weight:600;letter-spacing:0.04em;margin-top:0.6rem;cursor:pointer;}

  /* ─── Login screen ─── */
  .login{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;padding:2rem 1.6rem;text-align:center;background:linear-gradient(180deg,var(--cream) 0%,var(--warm) 100%);}
  .login-logo{font-family:'Cormorant Garant',serif;font-size:2.6rem;font-weight:700;color:var(--brown);letter-spacing:0.04em;margin-bottom:0.3rem;}
  .login-tag{font-size:0.78rem;letter-spacing:0.32em;color:var(--caramel);font-weight:700;text-transform:uppercase;margin-bottom:0.4rem;}
  .login-sub{font-size:0.9rem;color:var(--muted);margin-bottom:3rem;}
  .login-divider{width:42px;height:2px;background:var(--caramel);margin:1.2rem auto;}
  .login-info{background:white;border-radius:14px;padding:1rem 1.2rem;font-size:0.85rem;color:var(--text);line-height:1.7;border:1px solid var(--line);max-width:320px;}
  .login-info .email{color:var(--caramel);font-weight:600;}
  .login-note{font-size:0.72rem;color:var(--muted);margin-top:1.2rem;line-height:1.7;max-width:320px;}
  .login-error{background:#f7e0dc;color:#955040;padding:0.85rem 1.1rem;border-radius:12px;font-size:0.85rem;margin-top:1rem;max-width:320px;}

  /* ─── New Login (Email + Password) ─── */
  #screen-login{display:none;flex-direction:column;align-items:center;justify-content:center;flex:1;padding:2rem 1.6rem;text-align:center;background:linear-gradient(180deg,var(--cream) 0%,var(--warm) 100%);min-height:100vh;}
  #screen-login.active{display:flex;}
  .login-container{width:100%;max-width:340px;display:flex;flex-direction:column;align-items:center;}
  .login-paw{font-size:2.4rem;margin-bottom:0.4rem;}
  .login-logo h1{font-family:'Cormorant Garamond','Cormorant Garant',serif;font-size:2.4rem;font-weight:700;color:var(--brown);letter-spacing:0.04em;margin:0 0 0.2rem;}
  .login-logo .login-sub{font-size:0.78rem;letter-spacing:0.32em;color:var(--caramel);font-weight:700;text-transform:uppercase;margin:0 0 2rem;}
  .login-card{width:100%;background:white;border-radius:18px;padding:1.6rem 1.4rem;border:1px solid var(--line);box-shadow:0 8px 24px rgba(92,61,30,0.06);}
  .login-foot{margin-top:2rem;font-size:0.72rem;color:var(--muted);letter-spacing:0.04em;}

  /* ─── Monthly ─── */
  .month-switch{display:flex;align-items:center;justify-content:center;gap:1rem;margin:0.5rem 0 1rem;}
  .month-switch button{background:white;border:1px solid var(--line);width:36px;height:36px;border-radius:50%;color:var(--brown);font-size:1rem;cursor:pointer;}
  .month-switch button:disabled{opacity:0.4;cursor:not-allowed;}
  .month-label{font-family:'Cormorant Garant',serif;font-size:1.15rem;font-weight:700;color:var(--brown);min-width:110px;text-align:center;}

  .mini-stats{display:grid;grid-template-columns:1fr 1fr;gap:0.55rem;margin-bottom:1rem;}
  .mini-stat{background:white;border-radius:14px;padding:0.85rem 0.9rem;border:1px solid var(--line);}
  .mini-stat-label{font-size:0.68rem;color:var(--caramel);letter-spacing:0.16em;font-weight:700;margin-bottom:0.3rem;}
  .mini-stat-value{font-family:'Cormorant Garant',serif;font-size:1.5rem;font-weight:700;color:var(--brown);line-height:1;}
  .mini-stat-foot{font-size:0.7rem;color:var(--muted);margin-top:0.2rem;}

  .service-breakdown{display:flex;flex-direction:column;gap:0.45rem;}
  .sb-row{display:flex;align-items:center;background:white;padding:0.85rem 1rem;border-radius:14px;border:1px solid var(--line);gap:0.85rem;}
  .sb-icon{font-size:1.4rem;}
  .sb-info{flex:1;}
  .sb-name{font-size:0.92rem;font-weight:700;color:var(--text);}
  .sb-count{font-size:0.72rem;color:var(--muted);margin-top:0.1rem;}
  .sb-amount{font-family:'Cormorant Garant',serif;font-size:1.1rem;font-weight:700;color:var(--brown);}

  .pay-breakdown{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;margin-bottom:0.7rem;}
  .pay-pill{background:white;border-radius:14px;padding:0.7rem 0.9rem;border:1px solid var(--line);}
  .pay-pill-label{font-size:0.7rem;color:var(--muted);font-weight:600;letter-spacing:0.05em;}
  .pay-pill-icon{font-size:0.95rem;}
  .pay-pill-value{font-family:'Cormorant Garant',serif;font-size:1.05rem;font-weight:700;color:var(--brown);margin-top:0.15rem;}

  /* ─── Customer list ─── */
  .search-bar{background:white;border:1.5px solid var(--line);border-radius:50px;padding:0.7rem 1.1rem;display:flex;align-items:center;gap:0.6rem;margin-bottom:0.8rem;}
  .search-bar input{flex:1;border:0;background:transparent;font-family:inherit;font-size:0.92rem;outline:none;color:var(--text);}
  .customer-row{background:white;border-radius:14px;padding:0.85rem 1.05rem;margin-bottom:0.45rem;border:1px solid var(--line);display:flex;align-items:center;gap:0.85rem;cursor:pointer;}
  .customer-row:active{transform:scale(0.99);}
  .cust-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--caramel),var(--brown));display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:1rem;flex-shrink:0;}
  .cust-info{flex:1;min-width:0;}
  .cust-name{font-weight:700;font-size:0.95rem;color:var(--text);display:flex;align-items:center;gap:0.4rem;}
  .cust-pets{font-size:0.78rem;color:var(--muted);margin-top:0.18rem;}
  .cust-right{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:0.25rem;}
  .cust-meta{font-size:0.7rem;color:var(--muted);}

  /* ─── Customer detail ─── */
  .cust-hero{background:white;border-radius:20px;padding:1.3rem;margin-bottom:0.9rem;border:1px solid var(--line);}
  .cust-hero-row{display:flex;align-items:center;gap:1rem;}
  .cust-hero-avatar{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,var(--caramel),var(--brown));display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:1.2rem;flex-shrink:0;}
  .cust-hero-info{flex:1;min-width:0;}
  .cust-hero-name{font-family:'Cormorant Garant','Noto Serif TC',serif;font-size:1.35rem;font-weight:700;color:var(--brown);line-height:1.1;}
  .cust-hero-pets{font-size:0.82rem;color:var(--muted);margin-top:0.3rem;}
  .cust-hero-phone{font-size:0.78rem;color:var(--caramel);margin-top:0.35rem;font-weight:600;}

  /* ─── Stored value card ─── */
  .sv-card{background:linear-gradient(135deg,#fdf6ec 0%,#f5e9d2 100%);border:1.5px solid rgba(200,121,65,0.22);border-radius:18px;padding:1.15rem;margin-bottom:0.7rem;}
  .sv-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.5rem;}
  .sv-label{font-size:0.72rem;letter-spacing:0.2em;color:var(--caramel);font-weight:700;text-transform:uppercase;}
  .sv-value-row{display:flex;align-items:baseline;gap:0.4rem;margin-bottom:0.55rem;}
  .sv-currency{font-family:'Cormorant Garant',serif;font-size:1.2rem;font-weight:700;color:var(--brown);}
  .sv-value{font-family:'Cormorant Garant',serif;font-size:2.1rem;font-weight:700;color:var(--brown);line-height:1;}
  .sv-meta{font-size:0.78rem;color:var(--muted);margin-bottom:0.8rem;}
  .sv-actions{display:flex;gap:0.45rem;}
  .sv-btn{flex:1;background:white;border:1px solid rgba(200,121,65,0.3);color:var(--brown);padding:0.55rem 0.5rem;border-radius:10px;font-family:inherit;font-size:0.78rem;font-weight:600;cursor:pointer;}
  .sv-btn:active{background:var(--caramel);color:white;}

  /* ─── Monthly card item ─── */
  .mc-card{background:white;border-radius:16px;padding:1rem 1.1rem;margin-bottom:0.5rem;border:1.5px solid var(--line);}
  .mc-card.warning{border-color:rgba(212,160,76,0.4);background:linear-gradient(135deg,#fff9ed 0%,#fff3dd 100%);}
  .mc-card.expired{border-color:rgba(184,92,74,0.3);background:#fbf2ef;}
  .mc-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:0.55rem;}
  .mc-title{display:flex;align-items:center;gap:0.4rem;}
  .mc-title-icon{font-size:0.95rem;}
  .mc-title-text{font-weight:700;font-size:0.92rem;}
  .mc-id{font-size:0.65rem;color:var(--muted);letter-spacing:0.04em;}
  .mc-bar-wrap{background:rgba(92,61,30,0.08);border-radius:50px;height:8px;margin-bottom:0.45rem;overflow:hidden;}
  .mc-bar-fill{background:linear-gradient(90deg,var(--caramel),var(--brown));height:100%;border-radius:50px;transition:width 0.4s;}
  .mc-stats{display:flex;justify-content:space-between;font-size:0.74rem;color:var(--muted);}
  .mc-remaining{color:var(--brown);font-weight:700;}
  .mc-pet-info{font-size:0.72rem;color:var(--caramel);margin-top:0.45rem;font-weight:600;}

  /* ─── Activity history ─── */
  .activity{background:white;border-radius:16px;border:1px solid var(--line);overflow:hidden;}
  .activity-row{display:flex;align-items:center;padding:0.85rem 1.05rem;border-bottom:1px solid var(--line);gap:0.85rem;}
  .activity-row:last-child{border-bottom:0;}
  .ar-icon{width:32px;height:32px;border-radius:50%;background:var(--warm);display:flex;align-items:center;justify-content:center;font-size:0.95rem;flex-shrink:0;}
  .ar-info{flex:1;min-width:0;}
  .ar-type{font-size:0.85rem;font-weight:600;color:var(--text);}
  .ar-meta{font-size:0.7rem;color:var(--muted);margin-top:0.1rem;}
  .ar-amount{font-family:'Cormorant Garant',serif;font-size:0.95rem;font-weight:700;flex-shrink:0;}
  .ar-amount.positive{color:var(--green);}
  .ar-amount.negative{color:var(--text);}

  /* ─── Forms ─── */
  .form-row{margin-bottom:1rem;}
  .form-label{font-size:0.72rem;color:var(--caramel);letter-spacing:0.16em;font-weight:700;margin-bottom:0.45rem;text-transform:uppercase;}
  .form-input,.form-select{width:100%;background:white;border:1.5px solid var(--line);padding:0.9rem 1rem;border-radius:12px;font-family:inherit;font-size:0.95rem;color:var(--text);outline:none;-webkit-appearance:none;appearance:none;}
  .form-select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23c87941' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.6rem;}
  .form-input:focus,.form-select:focus{border-color:var(--caramel);}
  .form-input:disabled,.form-select:disabled{opacity:0.7;background:#f7f3eb;}
  .form-half{display:grid;grid-template-columns:1fr 1fr;gap:0.7rem;}
  .form-shortcut{display:grid;grid-template-columns:repeat(4,1fr);gap:0.4rem;margin-top:0.4rem;}
  .form-shortcut button{background:white;border:1px solid var(--line);padding:0.55rem 0;border-radius:10px;font-family:'Cormorant Garant',serif;font-weight:700;color:var(--brown);font-size:0.9rem;cursor:pointer;}
  .form-shortcut button:active{background:var(--brown);color:white;}

  /* ─── Big amount input ─── */
  .amount-input{background:linear-gradient(135deg,#fdf6ec 0%,#f5e9d2 100%);border-radius:18px;padding:1.4rem 1.2rem;text-align:center;border:1.5px solid rgba(200,121,65,0.18);margin-bottom:0.8rem;}
  .amount-input .lbl{font-size:0.7rem;letter-spacing:0.2em;color:var(--caramel);font-weight:700;text-transform:uppercase;margin-bottom:0.5rem;}
  .amount-input .inp-wrap{display:flex;align-items:baseline;justify-content:center;gap:0.4rem;}
  .amount-input .cur{font-family:'Cormorant Garant',serif;font-size:1.7rem;color:var(--brown);font-weight:700;}
  .amount-input input{font-family:'Cormorant Garant',serif;font-size:2.6rem;font-weight:700;color:var(--brown);background:transparent;border:0;width:200px;text-align:center;outline:none;border-bottom:2px dashed rgba(200,121,65,0.4);padding-bottom:0.1rem;}

  /* ─── Settings ─── */
  .settings-group{margin-bottom:1rem;}
  .settings-title{font-size:0.7rem;color:var(--caramel);letter-spacing:0.22em;font-weight:700;text-transform:uppercase;padding:0 0.4rem;margin-bottom:0.5rem;}
  .settings-card{background:white;border-radius:16px;overflow:hidden;border:1px solid var(--line);}
  .settings-row{display:flex;align-items:center;padding:0.9rem 1.05rem;border-bottom:1px solid var(--line);cursor:pointer;}
  .settings-row:last-child{border-bottom:0;}
  .sr-icon{width:34px;height:34px;border-radius:10px;background:var(--warm);display:flex;align-items:center;justify-content:center;font-size:1.05rem;margin-right:0.85rem;flex-shrink:0;}
  .sr-label{flex:1;font-size:0.92rem;font-weight:600;color:var(--text);}
  .sr-meta{font-size:0.78rem;color:var(--muted);}
  .sr-arrow{color:var(--muted);font-size:1rem;}

  .staff-list{padding:0.4rem 0;}
  .staff-row{display:flex;align-items:center;padding:0.7rem 1.05rem;gap:0.85rem;}
  .staff-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--caramel),var(--brown));display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:0.78rem;flex-shrink:0;}
  .staff-info{flex:1;}
  .staff-name{font-size:0.88rem;font-weight:600;}
  .staff-email{font-size:0.72rem;color:var(--muted);}
  .staff-role{font-size:0.7rem;background:var(--warm);color:var(--brown);padding:0.2rem 0.55rem;border-radius:50px;font-weight:600;}

  /* ─── Toast ─── */
  .toast{position:fixed;bottom:110px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--brown);color:white;padding:0.7rem 1.4rem;border-radius:50px;font-size:0.85rem;font-weight:600;box-shadow:0 8px 24px rgba(92,61,30,0.35);opacity:0;transition:all 0.3s;pointer-events:none;z-index:200;white-space:nowrap;}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
  .toast.error{background:var(--red);}

  /* ─── Loading state ─── */
  .loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 1rem;color:var(--muted);}
  .spinner{width:32px;height:32px;border:3px solid var(--line);border-top-color:var(--caramel);border-radius:50%;animation:spin 0.8s linear infinite;margin-bottom:0.7rem;}
  @keyframes spin{to{transform:rotate(360deg);}}
  .loading-text{font-size:0.85rem;}

  /* ─── Empty state ─── */
  .empty{text-align:center;padding:2.5rem 1rem;color:var(--muted);}
  .empty-icon{font-size:2.5rem;margin-bottom:0.5rem;opacity:0.5;}
  .empty-text{font-size:0.92rem;line-height:1.7;}

  /* ─── Modal / dialog ─── */
  .modal-backdrop{position:fixed;inset:0;background:rgba(74,46,21,0.55);z-index:300;display:none;align-items:center;justify-content:center;padding:1rem;backdrop-filter:blur(4px);}
  .modal-backdrop.show{display:flex;animation:fadeIn 0.2s;}
  .modal{background:white;border-radius:20px;padding:1.6rem 1.4rem;max-width:340px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,0.25);}
  .modal-icon{font-size:2.4rem;margin-bottom:0.4rem;}
  .modal-title{font-family:'Cormorant Garant','Noto Serif TC',serif;font-size:1.25rem;font-weight:700;color:var(--brown);margin-bottom:0.5rem;}
  .modal-text{font-size:0.88rem;color:var(--text);line-height:1.6;margin-bottom:1.2rem;}
  .modal-actions{display:flex;gap:0.5rem;}
  .modal-actions button{flex:1;padding:0.85rem;border-radius:12px;border:0;font-family:inherit;font-size:0.92rem;font-weight:700;cursor:pointer;}
  .modal-actions .cancel{background:var(--warm);color:var(--brown);}
  .modal-actions .confirm{background:var(--brown);color:white;}
  .modal-actions .confirm.danger{background:var(--red);}

  /* ─── Client view (preview) ─── */
  .client-banner{background:linear-gradient(135deg,#fdf6ec 0%,#f5e9d2 100%);border:1.5px solid rgba(200,121,65,0.22);border-radius:18px;padding:1.2rem 1.1rem;margin-bottom:0.8rem;}
  .client-greeting{font-family:'Cormorant Garant','Noto Serif TC',serif;font-size:1.3rem;font-weight:700;color:var(--brown);margin-bottom:0.4rem;}
  .client-account{display:flex;justify-content:space-between;padding:0.55rem 0;border-bottom:1px solid rgba(200,121,65,0.15);font-size:0.85rem;}
  .client-account:last-child{border-bottom:0;}
  .client-account .lbl{color:var(--muted);font-weight:500;}
  .client-account .val{font-weight:700;color:var(--brown);font-family:'Cormorant Garant',serif;}

  /* ─── Desktop scaling ─── */
  @media (min-width: 600px){
    body{max-width:480px;margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line);min-height:100vh;}
  }