/* ============================================================
   babydodofun Design System — Vecho Style
   ============================================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:18px;-webkit-text-size-adjust:100%}
body{font-family:"Geist",-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans TC","Microsoft JhengHei",sans-serif;font-size:1rem;line-height:1.625;color:#171717;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
img{max-width:100%;display:block}

:root{
--n50:#fafafa;--n100:#f5f5f5;--n200:#e5e5e5;--n300:#d4d4d4;--n400:#a1a1a1;--n500:#737373;--n600:#525252;--n700:#404040;--n800:#262626;--n900:#171717;
--red50:#fef2f2;--red500:#fb2c36;--red700:#bf000f;
--grn50:#f0fdf4;--grn500:#00c758;--grn700:#008138;
--yel50:#fefce8;--yel700:#a36100;--amb500:#f99c00;
--pur50:#faf5ff;--pur700:#8200da;
--bg:#fff;--bg-alt:#fafafa;--border:#e5e5e5;--border-s:#f5f5f5;
--shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);
--ease:cubic-bezier(.4,0,.2,1);--dur:.15s;
--nav-h:64px;
}

/* Typography */
.text-xs{font-size:.75rem}.text-sm{font-size:.875rem}.text-base{font-size:1rem}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem}.text-3xl{font-size:1.875rem}.text-4xl{font-size:2.25rem}
.font-normal{font-weight:400}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}
.tracking-tighter{letter-spacing:-.05em}.tracking-tight{letter-spacing:-.025em}.tracking-wider{letter-spacing:.05em}
.text-primary{color:#171717}.text-secondary{color:#737373}.text-tertiary{color:#a1a1a1}.text-muted{color:#525252}
.uppercase{text-transform:uppercase}

/* Layout */
.container{max-width:1152px;margin:0 auto;padding:0 1.5rem}
.container-sm{max-width:384px;margin:0 auto;padding:0 1.5rem}
.min-h-screen{min-height:100vh}
.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}
.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}
.flex-1{flex:1}.shrink-0{flex-shrink:0}.flex-wrap{flex-wrap:wrap}
.grid{display:grid}.hidden{display:none}.w-full{width:100%}
.text-center{text-align:center}.text-right{text-align:right}
.relative{position:relative}.absolute{position:absolute}
.border-t{border-top:1px solid var(--border)}.border-b{border-bottom:1px solid var(--border)}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Spacing */
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-12{margin-top:3rem}
.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}
.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}
.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-size:1.0625rem;font-weight:500;padding:.75rem 1.5rem;min-height:48px;border:none;border-radius:0;cursor:pointer;transition:all var(--dur) var(--ease);text-decoration:none;line-height:1.5}
.btn-primary{background:#171717;color:#fff;padding:1rem 2rem}
.btn-primary:hover{background:#262626;box-shadow:var(--shadow-lg)}
.btn-secondary{background:transparent;border:1px solid var(--border);color:#525252}
.btn-secondary:hover{border-color:#a1a1a1}
.btn-danger{background:#fb2c36;color:#fff}
.btn-danger:hover{background:#bf000f}
.btn-sm{padding:.375rem .75rem;font-size:.75rem}
.btn-lg{padding:.875rem 2rem}
.btn-full{width:100%}
.btn:disabled,.btn-disabled{border:1px solid var(--border);color:#d4d4d4;background:transparent;cursor:not-allowed;opacity:.6}

/* Forms */
.form-group{margin-bottom:1rem}
.form-label{display:block;font-size:1.0625rem;font-weight:500;color:#171717;margin-bottom:.375rem}
.form-input,.form-select{width:100%;padding:.625rem .75rem;font-size:1.0625rem;font-family:inherit;border:1px solid var(--border);background:#fff;color:#171717;border-radius:0;outline:none;transition:all var(--dur) var(--ease);-webkit-appearance:none;appearance:none;min-height:48px}
.form-input::placeholder{color:#a1a1a1}
.form-input:focus,.form-select:focus{border-color:transparent;box-shadow:0 0 0 2px #171717}
.form-input[readonly]{background:#fafafa;color:#737373;cursor:not-allowed}
.form-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;padding-right:2.5rem}
.form-hint{font-size:.75rem;color:#a1a1a1;margin-top:.25rem}

/* Cards */
.card{border:1px solid var(--border);background:#fff;padding:1.5rem;border-radius:0}
.card-highlight{background:var(--bg-alt)}

/* Badges */
.badge{display:inline-flex;align-items:center;font-size:15px;font-weight:500;padding:5px 14px;border-radius:0;line-height:1.6}
.badge-dark{background:#171717;color:#fff;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.badge-outline{background:transparent;color:#a1a1a1;box-shadow:inset 0 0 0 1px var(--border)}
.badge-success{background:var(--grn50);color:var(--grn700);box-shadow:inset 0 0 0 1px rgba(0,165,68,.2)}
.badge-error{background:var(--red50);color:var(--red700);box-shadow:inset 0 0 0 1px rgba(228,0,20,.2)}
.badge-warning{background:var(--yel50);color:var(--yel700);box-shadow:inset 0 0 0 1px rgba(205,137,0,.2)}
.badge-special{background:var(--pur50);color:var(--pur700);box-shadow:inset 0 0 0 1px rgba(152,16,250,.2)}
.badge-fan{background:#ffffff;color:#a1a1a1;box-shadow:inset 0 0 0 1px #e5e5e5}
.badge-silver{background:#f0f0f0;color:#737373;box-shadow:inset 0 0 0 1px #d4d4d4}
.badge-gold{background:var(--yel50);color:var(--yel700);box-shadow:inset 0 0 0 1px rgba(205,137,0,.2)}
.badge-black{background:#171717;color:#fff;box-shadow:inset 0 0 0 1px rgba(23,23,23,.4)}

/* Tables */
.table-wrap{width:100%;overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:1.0625rem}
.table th{text-align:left;padding:1rem;font-weight:500;color:#737373;border-bottom:1px solid var(--border);background:var(--bg-alt);white-space:nowrap}
.table td{padding:1rem;border-bottom:1px solid var(--border-s);color:#171717}
.table tr:hover td{background:#fafafa}

/* Navbar */
.navbar{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--nav-h);background:rgba(255,255,255,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border-s)}
.navbar-inner{max-width:1152px;margin:0 auto;padding:0 1.5rem;height:100%;display:flex;align-items:center;justify-content:space-between}
.navbar-logo{font-size:1.375rem;font-weight:700;letter-spacing:-.025em;color:#171717;text-decoration:none}
.navbar-link{font-size:1.125rem;color:#737373;text-decoration:none;transition:color var(--dur) var(--ease)}
.navbar-link:hover,.navbar-link.active{color:#171717}
.navbar-toggle{background:none;border:none;padding:.75rem;color:#737373;cursor:pointer;min-width:48px;min-height:48px;display:flex;align-items:center;justify-content:center}
.navbar-toggle:hover{color:#171717}
.navbar-toggle svg{width:1.5rem;height:1.5rem}

/* Admin Sidebar (collapsible) */
.admin-layout{display:flex;min-height:100vh;padding-top:var(--nav-h)}
.sidebar{width:240px;border-right:1px solid var(--border);background:#fff;padding:0;flex-shrink:0;position:fixed;top:var(--nav-h);left:0;bottom:0;overflow-y:auto;transition:width .2s var(--ease)}
.sidebar-nav{padding:1rem 0}
.sidebar-link{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.5rem;font-size:1.125rem;color:#737373;text-decoration:none;transition:all var(--dur) var(--ease);min-height:56px}
.sidebar-link:hover{color:#171717;background:#fafafa}
.sidebar-link.active{color:#171717;background:#fafafa;font-weight:500;box-shadow:inset 3px 0 0 #171717}
.sidebar-link svg{width:1.25rem;height:1.25rem;flex-shrink:0}
.sidebar-link-text{transition:opacity .15s;white-space:nowrap}
.sidebar.collapsed{width:64px}
.sidebar.collapsed .sidebar-link{padding:.75rem 0;justify-content:center}
.sidebar.collapsed .sidebar-link-text{opacity:0;width:0;overflow:hidden}
.sidebar.collapsed .sidebar-link svg{width:1.5rem;height:1.5rem}
.admin-main{flex:1;margin-left:240px;padding:2rem;background:var(--bg-alt);min-height:calc(100vh - var(--nav-h));transition:margin-left .2s var(--ease)}
.sidebar.collapsed~.admin-main,.admin-layout.collapsed .admin-main{margin-left:64px}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(2px);z-index:100;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all var(--dur) var(--ease)}
.modal-overlay.show{opacity:1;visibility:visible}
.modal{background:#fff;border:1px solid var(--border);padding:2rem;border-radius:0;max-width:480px;width:90%;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform var(--dur) var(--ease)}
.modal-overlay.show .modal{transform:translateY(0)}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}
.modal-title{font-size:1.25rem;font-weight:600}
.modal-close{background:none;border:none;padding:.25rem;color:#a1a1a1;cursor:pointer;transition:color var(--dur) var(--ease)}
.modal-close:hover{color:#171717}
.modal-footer{display:flex;justify-content:flex-end;gap:.75rem;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border-s)}

/* Risk Warning */
.risk-warning{border:1px solid var(--red500);background:var(--red50);padding:1rem;margin-bottom:1rem}
.risk-warning-title{font-size:1rem;font-weight:600;color:var(--red700);margin-bottom:.25rem}
.risk-warning-text{font-size:.9375rem;color:var(--red700)}

/* Stat Card */
.stat-card{border:1px solid var(--border);background:#fff;padding:1.5rem}
.stat-card-label{font-size:1rem;color:#737373;font-weight:500;margin-bottom:.5rem}
.stat-card-value{font-size:3rem;font-weight:700;letter-spacing:-.025em;color:#171717}
.stat-card-sub{font-size:.75rem;color:#a1a1a1;margin-top:.25rem}

/* Page Header */
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}
.page-title{font-size:2.25rem;font-weight:700;letter-spacing:-.025em}

/* Point Display */
.point-display{font-size:2.25rem;font-weight:700;letter-spacing:-.025em;color:#171717;line-height:1}

/* Tabs */
.tab-group{display:flex;border-bottom:1px solid var(--border);gap:0}
.tab{padding:.75rem 1.25rem;font-size:.875rem;font-weight:500;color:#737373;background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:all var(--dur) var(--ease);margin-bottom:-1px}
.tab:hover{color:#171717}.tab.active{color:#171717;border-bottom-color:#171717}

/* Pagination */
.pagination{display:flex;align-items:center;gap:.25rem;margin-top:1.5rem}
.page-btn{display:inline-flex;align-items:center;justify-content:center;min-width:2.5rem;height:2.5rem;padding:0 .625rem;font-size:1rem;border:1px solid var(--border);background:#fff;color:#525252;cursor:pointer;transition:all var(--dur) var(--ease)}
.page-btn:hover{border-color:#a1a1a1;color:#171717}
.page-btn.active{background:#171717;color:#fff;border-color:#171717}

/* Search bar */
.search-bar{display:flex;gap:.75rem;margin-bottom:1.5rem;flex-wrap:wrap}

/* Divider */
.divider{border:none;border-top:1px solid var(--border-s);margin:1.5rem 0}

/* Empty state */
.empty-state{text-align:center;padding:3rem 1rem;color:#a1a1a1}

/* Animations */
@keyframes fadeInUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeInUp .6s ease-out both}
.fade-d1{animation-delay:.1s}.fade-d2{animation-delay:.2s}.fade-d3{animation-delay:.3s}.fade-d4{animation-delay:.4s}

/* Scrollbar */
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#a3a3a3}

/* Numpad (tablet calculator) */
.numpad{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;max-width:360px}
.numpad-display{grid-column:1/-1;padding:1rem;text-align:right;font-size:1.875rem;font-weight:700;letter-spacing:-.025em;color:#171717;border:1px solid var(--border);background:#fff;min-height:64px;display:flex;align-items:center;justify-content:flex-end}
.numpad-display span{font-size:1rem;font-weight:400;color:#737373;margin-left:.5rem}
.numpad-btn{min-height:64px;font-size:1.75rem;font-weight:600;border:1px solid var(--border);background:#fff;color:#171717;cursor:pointer;transition:background .1s;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none}
.numpad-btn:active{background:#f0f0f0}
.numpad-btn.zero{grid-column:span 2}
.numpad-btn.clear{background:#f5f5f5;color:#737373}
.numpad-btn.confirm{background:#171717;color:#fff;grid-row:span 2}
.numpad-btn.confirm:active{background:#262626}
.numpad-btn.confirm-danger{background:var(--red500);color:#fff;grid-row:span 2}
.numpad-btn.confirm-danger:active{background:var(--red700)}

/* Plan Cards (tablet-sized touch targets) */
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
.plan-card{border:2px solid var(--border);background:#fff;padding:1.25rem;cursor:pointer;text-align:center;transition:border-color .15s;min-height:140px;display:flex;flex-direction:column;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none}
.plan-card:active,.plan-card.selected{border-color:#171717}
.plan-card-title{font-size:1.375rem;font-weight:700;margin-bottom:.25rem}
.plan-card-points{font-size:.875rem;color:#525252}
.plan-card-price{font-size:.75rem;color:#a1a1a1;margin-top:.25rem}

/* Qty Selector */
.qty-grid{display:flex;gap:.5rem}
.qty-btn{min-width:56px;min-height:56px;font-size:1.25rem;font-weight:600;border:2px solid var(--border);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .15s}
.qty-btn:active,.qty-btn.selected{border-color:#171717;background:#171717;color:#fff}

/* Big Tabs (tablet touch-friendly) */
.big-tabs{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:1.5rem}
.big-tab{flex:1;padding:1rem;font-size:1.125rem;font-weight:500;color:#737373;background:transparent;border:none;border-bottom:3px solid transparent;cursor:pointer;text-align:center;min-height:60px;transition:all .15s;margin-bottom:-2px}
.big-tab:hover{color:#171717}
.big-tab.active{color:#171717;border-bottom-color:#171717;font-weight:600}

/* Verification Code Display */
.code-display{display:flex;gap:.75rem;justify-content:center;margin:1rem 0}
.code-digit{width:64px;height:72px;display:flex;align-items:center;justify-content:center;font-size:2.25rem;font-weight:700;border:2px solid var(--border);background:#fff;color:#171717}

/* Voucher Block */
.voucher-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.75rem}
.voucher-block{border:2px solid var(--border);background:#fff;padding:1.25rem;cursor:pointer;text-align:center;transition:border-color .15s;min-height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.voucher-block:active,.voucher-block.selected{border-color:#171717}
.voucher-block-title{font-size:1rem;font-weight:600;margin-bottom:.25rem}
.voucher-block-points{font-size:.875rem;color:#525252}

/* Quick Navigation */
.quick-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.quick-nav-btn{border:2px solid #e5e5e5;background:#fff;padding:1.5rem;text-align:center;min-height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:1.125rem;font-weight:600;cursor:pointer;transition:border-color .15s;text-decoration:none;color:#171717}
.quick-nav-btn:active{border-color:#171717}
.quick-nav-btn svg{width:2rem;height:2rem;margin-bottom:.5rem;color:#737373}

/* Responsive */
@media(max-width:768px){
.sidebar{display:none}.admin-main{margin-left:0!important}.hide-mobile{display:none!important}
.plan-grid{grid-template-columns:1fr}
.numpad{max-width:100%}
}
@media(min-width:769px){.show-mobile{display:none!important}}