@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap');
/* =============================================================================
 *  TSFI DRAW MODULE — styles (scoped .tsfi-coupon). Same tokens / grid / drawer
 *  language as tsfi_gift.css. Dark mode: body.ss-dark.
 * ============================================================================= */
.tsfi-coupon{
  --bg:#EEF1F6; --surface:#FFFFFF; --ink:#1B1F2A; --muted:#6B7280; --faint:#9AA2B1;
  --line:#E2E6EE; --line-strong:#CDD4E0; --zebra:#F8FAFC;
  --accent:#1F5FA8; --accent-ink:#16487E; --accent-soft:#E8F0FA;
  --ok:#1F7A3D; --ok-bg:#E6F4EB; --warn:#9A6700; --warn-bg:#FBF1D6; --dark:#111418; --danger:#B42318;
  color:var(--ink); background:var(--bg); min-height:100vh;
  font-family:'Roboto',-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
body.ss-dark .tsfi-coupon{
  --bg:#0E1521; --surface:#161F2E; --ink:#E7ECF3; --muted:#93A1B3; --faint:#6B7889;
  --line:#27313F; --line-strong:#374253; --zebra:#1A2433;
  --accent:#4C8DD6; --accent-ink:#A6C8EE; --accent-soft:#1C2A3D;
  --ok:#62CD86; --ok-bg:#15291D; --warn:#E2B45C; --warn-bg:#2A2212; --dark:#0B0F14; --danger:#F1776B;
}
.tsfi-coupon *{box-sizing:border-box}

.tsfi-coupon .bar{background:var(--surface);border-bottom:1px solid var(--line);padding:14px 26px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.tsfi-coupon .brand .eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);margin:0;}
.tsfi-coupon .brand h1{font-size:18px;font-weight:650;margin:2px 0 0;letter-spacing:-.01em;}
.tsfi-coupon .theme-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);cursor:pointer;}
.tsfi-coupon .theme-btn:hover{background:var(--zebra);}

.tsfi-coupon .page{max-width:1280px;margin:0 auto;padding:22px 26px 60px;}
.tsfi-coupon .controls{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
.tsfi-coupon .tabs{display:flex;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:4px;}
.tsfi-coupon .tab{border:none;background:none;padding:7px 13px;border-radius:8px;font-family:inherit;font-size:13px;font-weight:550;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:7px;}
.tsfi-coupon .tab:hover{color:var(--ink);}
.tsfi-coupon .tab.active{background:var(--accent-soft);color:var(--accent-ink);}
.tsfi-coupon .tab .n{font-size:11px;background:var(--zebra);padding:1px 7px;border-radius:9px;color:var(--muted);}
.tsfi-coupon .tab.active .n{background:var(--surface);color:var(--accent-ink);}
.tsfi-coupon .search{flex:1;min-width:200px;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;padding:0 12px;height:40px;}
.tsfi-coupon .search input{border:none;background:none;outline:none;flex:1;font-family:inherit;font-size:13.5px;color:var(--ink);}
.tsfi-coupon .add-btn{height:40px;padding:0 16px;border-radius:10px;border:none;background:var(--accent);color:#fff;font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:7px;}
.tsfi-coupon .add-btn:hover{background:var(--accent-ink);}

.tsfi-coupon .tablewrap{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.tsfi-coupon .dt-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap;}
.tsfi-coupon .dt-show{font-size:12.5px;color:var(--muted);}
.tsfi-coupon .dt-show select{height:32px;border:1px solid var(--line-strong);border-radius:7px;background:var(--surface);color:var(--ink);font-family:inherit;margin:0 4px;}
.tsfi-coupon .dt-count{font-size:12.5px;color:var(--muted);}
.tsfi-coupon .scroll{overflow-x:auto;}
.tsfi-coupon table{width:100%;min-width:920px;border-collapse:collapse;}
.tsfi-coupon thead th{text-align:left;font-size:11px;font-weight:650;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--zebra);}
.tsfi-coupon thead th.num{text-align:right;}
.tsfi-coupon th.sortable{cursor:pointer;}
.tsfi-coupon th .arr{display:inline-flex;flex-direction:column;margin-left:4px;line-height:.5;vertical-align:middle;}
.tsfi-coupon th .arr i{font-size:7px;color:var(--faint);font-style:normal;}
.tsfi-coupon th.asc .arr .up,.tsfi-coupon th.desc .arr .down{color:var(--accent);}
.tsfi-coupon tbody td{padding:12px 14px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:middle;}
.tsfi-coupon tbody tr{cursor:pointer;}
.tsfi-coupon tbody tr:hover{background:var(--zebra);}
.tsfi-coupon td.num{text-align:right;font-variant-numeric:tabular-nums;}
.tsfi-coupon th.sno,.tsfi-coupon td.sno{width:46px;text-align:right;padding-right:14px;color:var(--faint);font-variant-numeric:tabular-nums;}
.tsfi-coupon td.gift b{font-weight:600;}
.tsfi-coupon td.gift .gid{display:block;margin-top:1px;font-size:11.5px;color:var(--faint);}
.tsfi-coupon .chip{display:inline-block;font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:20px;color:var(--accent-ink);background:var(--accent-soft);}
.tsfi-coupon .chip-done{color:var(--ok);background:var(--ok-bg);}
.tsfi-coupon .chip-draft{color:var(--warn);background:var(--warn-bg);}
.tsfi-coupon .empty{padding:48px 16px;text-align:center;color:var(--muted);}
.tsfi-coupon .empty.small{padding:24px;}
.tsfi-coupon .empty b{display:block;color:var(--ink);font-size:15px;margin-bottom:4px;}
.tsfi-coupon .loading{padding:34px;text-align:center;color:var(--muted);}
.tsfi-coupon .dt-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-top:1px solid var(--line);flex-wrap:wrap;}
.tsfi-coupon .dt-info{font-size:12.5px;color:var(--muted);}
.tsfi-coupon .dt-pager{display:flex;gap:4px;flex-wrap:wrap;}
.tsfi-coupon .dt-pager button{min-width:32px;height:32px;border:1px solid var(--line-strong);background:var(--surface);border-radius:7px;font-family:inherit;font-size:13px;color:var(--ink);cursor:pointer;padding:0 9px;}
.tsfi-coupon .dt-pager button:hover:not(:disabled):not(.active){background:var(--zebra);}
.tsfi-coupon .dt-pager button.active{background:var(--accent);color:#fff;border-color:var(--accent);}
.tsfi-coupon .dt-pager button:disabled{opacity:.4;cursor:default;}

/* drawer */
.tsfi-coupon-scrim{position:fixed;inset:0;background:rgba(18,26,45,.42);opacity:0;pointer-events:none;transition:opacity .2s;z-index:40;}
.tsfi-coupon-scrim.open{opacity:1;pointer-events:auto;}
.tsfi-coupon-drawer{position:fixed;top:0;right:0;height:100%;width:min(680px,100%);background:var(--bg);box-shadow:-8px 0 30px rgba(15,22,40,.18);transform:translateX(100%);transition:transform .24s ease;z-index:50;display:flex;flex-direction:column;}
.tsfi-coupon-drawer.open{transform:translateX(0);}
.tsfi-coupon-drawer.win{width:min(520px,100%);}
.tsfi-coupon .dhead{background:var(--surface);border-bottom:1px solid var(--line);padding:18px 22px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.tsfi-coupon .dhead h2{margin:0;font-size:18px;font-weight:650;}
.tsfi-coupon .dhead .sub{color:var(--muted);font-size:12.5px;margin-top:3px;}
.tsfi-coupon .x{border:none;background:var(--zebra);width:34px;height:34px;border-radius:9px;cursor:pointer;font-size:17px;color:var(--muted);flex:none;}
.tsfi-coupon .x:hover{color:var(--ink);}
.tsfi-coupon .dbody{overflow-y:auto;padding:18px 22px 30px;flex:1;}
.tsfi-coupon .locknote{background:var(--warn-bg);color:var(--warn);border-radius:10px;padding:11px 14px;font-size:12.5px;margin-bottom:16px;}
.tsfi-coupon .block{margin-bottom:22px;}
.tsfi-coupon .block h3{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 12px;display:flex;align-items:center;gap:10px;}
.tsfi-coupon .pick-n{font-size:11px;font-weight:600;color:var(--accent-ink);background:var(--accent-soft);padding:2px 9px;border-radius:10px;text-transform:none;letter-spacing:0;}
.tsfi-coupon .form{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.tsfi-coupon .f{display:flex;flex-direction:column;gap:5px;}
.tsfi-coupon .f.span{grid-column:1/-1;}
.tsfi-coupon .f label{font-size:12px;font-weight:600;color:var(--ink);}
.tsfi-coupon .f .req{color:var(--danger);}
.tsfi-coupon .f input,.tsfi-coupon .f textarea{border:1px solid var(--line-strong);border-radius:9px;padding:9px 11px;font-family:inherit;font-size:13.5px;background:var(--surface);color:var(--ink);}
.tsfi-coupon .f input:focus,.tsfi-coupon .f textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.tsfi-coupon .f .hint{font-size:11.5px;color:var(--faint);}
.tsfi-coupon .f.error input{border-color:var(--danger);}
.tsfi-coupon .f .err{display:none;font-size:11.5px;color:var(--danger);}
.tsfi-coupon .f.error .err{display:block;}

/* partner tags */
.tsfi-coupon .tagrow{display:flex;gap:8px;}
.tsfi-coupon .tagrow input{flex:1;border:1px solid var(--line-strong);border-radius:9px;padding:9px 11px;font-family:inherit;font-size:13.5px;background:var(--surface);color:var(--ink);}
.tsfi-coupon .mini{border:1px solid var(--line-strong);background:var(--surface);border-radius:9px;padding:0 14px;font-family:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;}
.tsfi-coupon .mini:hover{background:var(--zebra);}
.tsfi-coupon .tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px;}
.tsfi-coupon .tag{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;background:var(--accent-soft);color:var(--accent-ink);padding:4px 11px;border-radius:20px;}
.tsfi-coupon .tag i{cursor:pointer;font-style:normal;font-size:14px;opacity:.7;}
.tsfi-coupon .tag i:hover{opacity:1;}
.tsfi-coupon .muted{color:var(--faint);font-size:12.5px;}

/* gift card picker */
.tsfi-coupon .giftgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;}
.tsfi-coupon .giftcard{border:1.5px solid var(--line);border-radius:12px;padding:9px;cursor:pointer;background:var(--surface);transition:border-color .12s,box-shadow .12s;}
.tsfi-coupon .giftcard:hover{border-color:var(--line-strong);}
.tsfi-coupon .giftcard.picked{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.tsfi-coupon .thumbwrap{position:relative;}
.tsfi-coupon .thumbwrap img{width:100%;height:96px;object-fit:cover;border-radius:8px;background:var(--zebra);}
.tsfi-coupon .tick{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-size:13px;display:flex;align-items:center;justify-content:center;}
.tsfi-coupon .gname{font-size:12.5px;font-weight:600;margin-top:7px;line-height:1.3;}
.tsfi-coupon .gmeta{font-size:11px;color:var(--muted);margin-top:2px;}
.tsfi-coupon .qty{display:flex;align-items:center;gap:7px;margin-top:8px;}
.tsfi-coupon .qty label{font-size:11px;color:var(--muted);}
.tsfi-coupon .qty input{width:64px;border:1px solid var(--line-strong);border-radius:7px;padding:5px 8px;font-family:inherit;font-size:13px;background:var(--surface);color:var(--ink);}

/* footer */
.tsfi-coupon .footer{border-top:1px solid var(--line);background:var(--surface);padding:14px 22px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.tsfi-coupon .act{height:40px;padding:0 18px;border-radius:9px;font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;border:1px solid transparent;}
.tsfi-coupon .btn-primary{background:var(--accent);color:#fff;}
.tsfi-coupon .btn-primary:hover{background:var(--accent-ink);}
.tsfi-coupon .btn-run{background:var(--dark);color:#fff;}
.tsfi-coupon .btn-run:hover{opacity:.88;}
.tsfi-coupon .btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line-strong);}
.tsfi-coupon .btn-ghost:hover{background:var(--zebra);}
.tsfi-coupon .del{background:none;color:var(--danger);border-color:transparent;margin-right:auto;}
.tsfi-coupon .del:hover{background:var(--warn-bg);}
.tsfi-coupon .act:disabled{opacity:.55;cursor:default;}

/* winners */
.tsfi-coupon .winrow{display:flex;gap:12px;padding:12px 2px;border-bottom:1px solid var(--line);}
.tsfi-coupon .wimg{width:64px;height:50px;object-fit:cover;border-radius:8px;background:var(--zebra);border:1px solid var(--line);flex:none;cursor:zoom-in;}
.tsfi-coupon .wgift{font-size:13.5px;font-weight:600;}
.tsfi-coupon .wcust{font-size:12.5px;color:var(--ink);margin-top:1px;}
.tsfi-coupon .wmeta{display:flex;align-items:center;gap:8px;margin-top:5px;flex-wrap:wrap;}
.tsfi-coupon .wmeta .code{font-size:11.5px;color:var(--muted);font-family:ui-monospace,Menlo,monospace;}
.tsfi-coupon .wmeta .when{font-size:11.5px;color:var(--faint);}

/* lightbox + toast */
.tsfi-coupon-lightbox{position:fixed;inset:0;background:rgba(8,12,22,.82);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;z-index:80;padding:30px;}
.tsfi-coupon-lightbox.open{opacity:1;pointer-events:auto;}
.tsfi-coupon-lightbox img{max-width:90vw;max-height:88vh;border-radius:12px;}
.tsfi-coupon-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,80px);background:#0F1622;color:#fff;padding:12px 20px;border-radius:11px;font-size:13.5px;font-weight:500;box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:0;transition:all .25s;z-index:95;pointer-events:none;display:flex;align-items:center;gap:9px;}
.tsfi-coupon-toast.show{transform:translate(-50%,0);opacity:1;}
.tsfi-coupon-toast .dot{width:8px;height:8px;border-radius:50%;background:#3FCF73;}

@media(prefers-reduced-motion:reduce){.tsfi-coupon *{transition:none!important;}}
@media(max-width:860px){
  .tsfi-coupon .bar{padding:12px 16px;}
  .tsfi-coupon .page{padding:16px 14px 44px;}
  .tsfi-coupon .search{order:-1;flex:1 1 100%;}
  .tsfi-coupon .tabs{width:100%;overflow-x:auto;flex-wrap:nowrap;}
  .tsfi-coupon .add-btn{flex:1 1 100%;justify-content:center;}
}
@media(max-width:600px){
  .tsfi-coupon .form{grid-template-columns:1fr;}
  .tsfi-coupon .footer .act{flex:1 1 auto;}
  .tsfi-coupon .del{margin-right:0;}
}

/* draw-status / winners link additions */
.tsfi-coupon .winlink{ color:#1F5FA8; font-weight:600; text-decoration:none; cursor:pointer; border-bottom:1px dashed rgba(31,95,168,.45); }
.tsfi-coupon .winlink:hover{ border-bottom-style:solid; }
.tsfi-coupon .statusline{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
body.ss-dark .tsfi-coupon .winlink{ color:#7FB3F2; border-bottom-color:rgba(127,179,242,.5); }

/* ---------- coupon page extras ---------- */
.tsfi-coupon .controls .filt{
  height:38px; padding:0 12px; border:1px solid var(--line,#E2E8F0); border-radius:10px;
  background:var(--card,#fff); color:var(--ink,#0F172A); font-size:13px; font-family:inherit; cursor:pointer;
}
.tsfi-coupon .clear-btn{
  height:38px; padding:0 14px; border:1px solid var(--line,#E2E8F0); border-radius:10px;
  background:transparent; color:var(--muted,#64748B); font-size:13px; cursor:pointer;
}
.tsfi-coupon .clear-btn:hover{ color:var(--ink,#0F172A); }
.tsfi-coupon td.code b{ font-variant-numeric:tabular-nums; letter-spacing:.5px; }
.tsfi-coupon td.cust .cn{ display:block; font-weight:600; }
.tsfi-coupon td.cust .cm{ display:block; font-size:12px; color:var(--muted,#64748B); }
.tsfi-coupon .winflag{ font-size:12px; color:var(--muted,#94A3B8); }
.tsfi-coupon .winflag.won{ color:#15803D; font-weight:700; }

.tsfi-coupon .chip-active{  background:#DCFCE7; color:#166534; }
.tsfi-coupon .chip-pending{ background:#FEF9C3; color:#854D0E; }
.tsfi-coupon .chip-reject{  background:#FEE2E2; color:#991B1B; }
.tsfi-coupon .chip-other{   background:#E2E8F0; color:#334155; }

.tsfi-coupon .kv{ display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--line,#EEF2F7); }
.tsfi-coupon .kv span{ color:var(--muted,#64748B); font-size:13px; }
.tsfi-coupon .kv b{ text-align:right; }

body.ss-dark .tsfi-coupon .chip-active{  background:#14532D; color:#BBF7D0; }
body.ss-dark .tsfi-coupon .chip-pending{ background:#422006; color:#FDE68A; }
body.ss-dark .tsfi-coupon .chip-reject{  background:#450A0A; color:#FECACA; }
body.ss-dark .tsfi-coupon .chip-other{   background:#1E293B; color:#CBD5E1; }
body.ss-dark .tsfi-coupon .winflag.won{ color:#4ADE80; }