/* DTDC Tracking Barcode - Label Studio | Developed by Ayush Dhawan */

.dtdc-app{
	--dtdc-red:#d71920;
	--dtdc-red-d:#b3141a;
	--dtdc-ink:#111827;
	--dtdc-mut:#6b7280;
	--dtdc-line:#e5e7eb;
	--dtdc-bg:#f3f4f6;
	--dtdc-card:#fff;
	max-width:760px;
	margin:0 auto;
	padding:12px 12px 24px;
	box-sizing:border-box;
	color:var(--dtdc-ink);
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	font-size:16px;
	line-height:1.45;
}
.dtdc-app *,.dtdc-app *::before,.dtdc-app *::after{box-sizing:border-box}
.dtdc-admin-wrap .dtdc-app{margin:0;max-width:820px}

/* Header */
.dtdc-hd{display:flex;align-items:center;gap:12px;margin:4px 0 14px}
.dtdc-logo{width:46px;height:46px;border-radius:12px;background:var(--dtdc-red);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.dtdc-title{margin:0!important;padding:0!important;font-size:22px!important;line-height:1.2!important;font-weight:700!important;color:var(--dtdc-ink)!important}
.dtdc-sub{margin:2px 0 0!important;color:var(--dtdc-mut);font-size:14px}

/* Cards */
.dtdc-card{background:var(--dtdc-card);border:1px solid var(--dtdc-line);border-radius:14px;padding:14px;margin:0 0 12px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.dtdc-card h3{margin:0 0 8px;font-size:16px}
.dtdc-lbl{display:block;font-size:13px;font-weight:600;color:#374151;margin:0 0 6px}
.dtdc-hint,.dtdc-muted{color:var(--dtdc-mut);font-size:13px;margin:8px 0 0}
.dtdc-note{margin-top:10px;padding:9px 12px;border-radius:10px;background:#f9fafb;border:1px dashed #d1d5db;font-size:13px;color:#374151}

/* Inputs (16px = no iOS zoom) */
.dtdc-app .dtdc-in{
	display:block;width:100%;min-height:48px;padding:10px 12px;margin:0 0 10px;
	font-size:16px;color:var(--dtdc-ink);background:#fff;
	border:1.5px solid #d1d5db;border-radius:10px;box-shadow:none;outline:0;
}
.dtdc-app .dtdc-in:focus{border-color:var(--dtdc-red);box-shadow:0 0 0 3px rgba(215,25,32,.15)}
#dtdc-start{font-size:18px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}
.dtdc-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* Segmented control */
.dtdc-seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:#f3f4f6;padding:4px;border-radius:12px}
.dtdc-seg button{
	appearance:none;border:0;background:transparent;border-radius:9px;padding:10px 6px;
	font-size:15px;font-weight:700;color:#374151;cursor:pointer;min-height:52px;
}
.dtdc-seg button small{display:block;font-size:11px;font-weight:500;color:var(--dtdc-mut);margin-top:1px}
.dtdc-seg button.is-on{background:#fff;color:var(--dtdc-red);box-shadow:0 1px 3px rgba(0,0,0,.12)}

/* Chips */
.dtdc-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.dtdc-chips button{
	appearance:none;border:1.5px solid #d1d5db;background:#fff;border-radius:999px;
	padding:7px 12px;font-size:13px;font-weight:600;color:#374151;cursor:pointer;min-height:36px;
}
.dtdc-chips button.is-on{border-color:var(--dtdc-red);background:#fef2f2;color:var(--dtdc-red)}
#dtdc-thermal-box{margin-top:12px}
#dtdc-thermal-box[hidden],#dtdc-pos-wrap[hidden],#dtdc-pos-hint[hidden],#dtdc-warn[hidden]{display:none}

/* Switches */
.dtdc-switches{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:2px}
.dtdc-sw{display:inline-flex;align-items:center;gap:10px;font-size:15px;cursor:pointer;min-height:36px}
.dtdc-sw input{position:absolute;opacity:0;width:0;height:0}
.dtdc-sw span{position:relative;width:44px;height:26px;border-radius:99px;background:#d1d5db;transition:.15s;flex:none}
.dtdc-sw span::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.15s;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.dtdc-sw input:checked + span{background:var(--dtdc-red)}
.dtdc-sw input:checked + span::after{left:21px}
.dtdc-sw input:focus-visible + span{box-shadow:0 0 0 3px rgba(215,25,32,.25)}

/* Preview */
.dtdc-pv-hd{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.dtdc-meta{font-size:12.5px;color:var(--dtdc-mut)}
.dtdc-warn{margin:0 0 10px;padding:9px 12px;border-radius:10px;background:#fffbeb;border:1px solid #fcd34d;color:#92400e;font-size:13px}
.dtdc-pv-box{background:#e5e7eb;border-radius:10px;padding:10px;min-height:120px;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:12px}
.dtdc-empty{color:var(--dtdc-mut);font-size:14px;text-align:center;padding:30px 10px;margin:auto}
.dtdc-more{font-size:12.5px;color:#4b5563;text-align:center}
.dtdc-pv-item{position:relative;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.18);flex:none}
.dtdc-pv-item > *{position:absolute;top:0;left:0;transform-origin:top left}

/* Sticky action bar */
.dtdc-bar{
	position:sticky;bottom:0;z-index:20;display:grid;grid-template-columns:1fr 1.4fr;gap:10px;
	margin:0 -12px;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
	background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
	border-top:1px solid var(--dtdc-line);
}
.dtdc-btn{
	appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;
	min-height:52px;padding:0 16px;border-radius:12px;border:1.5px solid #d1d5db;background:#fff;
	color:#111827;font-size:16px;font-weight:700;cursor:pointer;text-decoration:none;transition:transform .12s,background .15s;
}
.dtdc-btn:active{transform:scale(.97)}
.dtdc-btn-primary{background:var(--dtdc-red);border-color:var(--dtdc-red);color:#fff}
.dtdc-btn-primary:hover,.dtdc-btn-primary:focus{background:var(--dtdc-red-d);border-color:var(--dtdc-red-d);color:#fff}
.dtdc-btn:disabled{opacity:.5;cursor:not-allowed}

/* Footer credit */
.dtdc-ft{text-align:center;color:var(--dtdc-mut);font-size:13px;padding:10px 0 0}
.dtdc-ft strong{color:var(--dtdc-ink)}

/* Toast */
.dtdc-toast{
	position:fixed;left:50%;bottom:90px;transform:translate(-50%,20px);opacity:0;pointer-events:none;
	background:#111827;color:#fff;padding:10px 16px;border-radius:10px;font-size:14px;z-index:99999;
	transition:.2s;max-width:90vw;text-align:center;
}
.dtdc-toast.is-on{opacity:1;transform:translate(-50%,0)}

/* Admin tables */
.dtdc-logs-actions{margin:0 0 12px;display:flex;gap:8px;flex-wrap:wrap}
.dtdc-table-wrap{overflow-x:auto;background:#fff;border-radius:12px}
.dtdc-table th,.dtdc-table td{white-space:nowrap;vertical-align:middle}
.dtdc-row-new td{background:#fef2f2!important}
.dtdc-badge{display:inline-block;font-size:11px;font-weight:700;padding:2px 7px;border-radius:99px;margin-right:4px}
.dtdc-badge-new{background:var(--dtdc-red);color:#fff}
.dtdc-badge-warn{background:#f59e0b;color:#fff}
.dtdc-newtxt{color:var(--dtdc-red)}

/* Desktop */
@media (min-width:700px){
	.dtdc-app{padding:20px}
	.dtdc-bar{grid-template-columns:200px 1fr;margin:0 -20px;padding-left:20px;padding-right:20px}
}

/* ---------- Label artwork (screen + print) ---------- */
.dtdc-label{
	display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
	overflow:hidden;background:#fff;color:#000;line-height:1.05;gap:.8mm;
	font-family:Arial,Helvetica,sans-serif;
}
.dtdc-label.has-border{border:.2mm solid #000}
.dtdc-l-co,.dtdc-l-tx{font-weight:800;color:#000;white-space:nowrap;max-width:100%;overflow:hidden}
.dtdc-l-co{letter-spacing:.2mm}
.dtdc-l-tx{letter-spacing:.15mm}
.dtdc-l-bc{display:block;flex:1 1 0;min-height:0;width:100%}
.dtdc-slot{background:transparent}

.dtdc-sheet{background:#fff;overflow:hidden}
.dtdc-grid{display:grid;justify-content:start}
.dtdc-tpage{background:#fff;overflow:hidden}

/* ---------- Printing ---------- */
#dtdc-print-root{display:none}

@media print{
	html.dtdc-printing body > *:not(#dtdc-print-root){display:none!important}
	html.dtdc-printing #dtdc-print-root{display:block!important}
	html.dtdc-printing,
	html.dtdc-printing body{margin:0!important;padding:0!important;background:#fff!important}
	html.dtdc-printing *{-webkit-print-color-adjust:exact;print-color-adjust:exact}

	#dtdc-print-root .dtdc-sheet,
	#dtdc-print-root .dtdc-tpage{page-break-after:always;break-after:page;page-break-inside:avoid;break-inside:avoid}
	#dtdc-print-root .dtdc-sheet:last-child,
	#dtdc-print-root .dtdc-tpage:last-child{page-break-after:auto;break-after:auto}
}


/* ---------- Standalone page shell ---------- */
html:has(body.dtdc-standalone),body.dtdc-standalone{margin:0;padding:0}
body.dtdc-standalone{min-height:100vh;min-height:100dvh;background:#f3f4f6;-webkit-text-size-adjust:100%}
body.dtdc-standalone.is-app .dtdc-app{min-height:100vh;min-height:100dvh;padding-top:calc(12px + env(safe-area-inset-top,0px));display:flex;flex-direction:column}
body.dtdc-standalone.is-app .dtdc-app .dtdc-bar{margin-top:auto}

/* ---------- App polish ---------- */
@keyframes dtdc-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.dtdc-app .dtdc-card{animation:dtdc-rise .45s cubic-bezier(.2,.8,.2,1) both}
.dtdc-app .dtdc-card:nth-of-type(2){animation-delay:.05s}
.dtdc-app .dtdc-card:nth-of-type(3){animation-delay:.1s}
.dtdc-app .dtdc-card:nth-of-type(4){animation-delay:.15s}

.dtdc-hd-tx{flex:1;min-width:0}
.dtdc-user{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--dtdc-line);border-radius:999px;padding:4px 4px 4px 4px;flex:none;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.dtdc-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#e11d28,#b3141a);color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center}
.dtdc-user-name{font-size:13.5px;font-weight:700;max-width:92px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dtdc-out{appearance:none;border:0;background:#f3f4f6;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.dtdc-out svg{width:18px;height:18px;fill:none;stroke:#374151;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dtdc-out:hover{background:#fee2e2}
.dtdc-out:hover svg{stroke:var(--dtdc-red)}
@media (max-width:420px){.dtdc-user-name{display:none}.dtdc-user{padding-right:4px}.dtdc-sub{font-size:13px}}

.dtdc-next{display:block;width:100%;margin:-2px 0 12px;padding:10px 12px;border:1.5px dashed var(--dtdc-red);background:#fef2f2;color:var(--dtdc-red);border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;text-align:left}
.dtdc-next[hidden]{display:none}
.dtdc-qchips{margin:2px 0 0}

/* ---------- Login ---------- */
.dtdc-lg{
	--r:#d71920;--r-d:#b3141a;
	position:relative;min-height:100vh;min-height:100dvh;width:100%;box-sizing:border-box;
	display:flex;align-items:center;justify-content:center;overflow:hidden;
	padding:max(18px,env(safe-area-inset-top,0px)) 16px max(18px,env(safe-area-inset-bottom,0px));
	background:radial-gradient(120% 90% at 15% 0%,#1d2547 0%,#0b1020 55%,#060914 100%);
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#0f172a;line-height:1.4;
}
.dtdc-lg *,.dtdc-lg *::before,.dtdc-lg *::after{box-sizing:border-box}
.dtdc-lg-bg{position:absolute;inset:0;pointer-events:none}
.dtdc-blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;animation:dtdc-float 14s ease-in-out infinite alternate}
.dtdc-blob.b1{width:340px;height:340px;background:#e11d28;top:-90px;left:-80px}
.dtdc-blob.b2{width:380px;height:380px;background:#4f46e5;bottom:-120px;right:-100px;animation-duration:18s;animation-delay:-4s}
.dtdc-blob.b3{width:240px;height:240px;background:#f97316;top:42%;left:55%;opacity:.3;animation-duration:16s;animation-delay:-8s}
@keyframes dtdc-float{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(40px,-50px,0) scale(1.18)}}
.dtdc-lg-bars{
	position:absolute;left:0;right:0;bottom:0;height:42%;
	background:repeating-linear-gradient(90deg,rgba(255,255,255,.09) 0 2px,transparent 2px 6px,rgba(255,255,255,.09) 6px 7px,transparent 7px 12px,rgba(255,255,255,.09) 12px 16px,transparent 16px 19px);
	-webkit-mask-image:linear-gradient(to top,#000,transparent);mask-image:linear-gradient(to top,#000,transparent);
	animation:dtdc-drift 14s linear infinite;
}
@keyframes dtdc-drift{from{background-position:0 0}to{background-position:190px 0}}

.dtdc-lg-card{
	position:relative;z-index:1;width:100%;max-width:400px;padding:30px 22px 20px;
	background:rgba(255,255,255,.95);border-radius:26px;
	box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.5) inset;
	-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
	animation:dtdc-card-in .8s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes dtdc-card-in{from{opacity:0;transform:translateY(34px) scale(.96)}to{opacity:1;transform:none}}
.dtdc-lg-card.is-shake{animation:dtdc-shake .45s cubic-bezier(.36,.07,.19,.97)}
@keyframes dtdc-shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
.dtdc-lg-card.is-leaving{animation:dtdc-card-out .65s ease forwards}
@keyframes dtdc-card-out{to{opacity:0;transform:translateY(-16px) scale(.96)}}

/* animated logo: pulsing barcode + laser */
.dtdc-lg-logo{
	position:relative;width:78px;height:78px;margin:0 auto 14px;border-radius:22px;overflow:hidden;
	background:linear-gradient(135deg,#ef2430,#b3141a);
	display:flex;align-items:center;justify-content:center;gap:3px;padding:16px 10px;
	box-shadow:0 12px 28px rgba(215,25,32,.45);
	animation:dtdc-pop .9s .15s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes dtdc-pop{from{opacity:0;transform:scale(.5) rotate(-8deg)}to{opacity:1;transform:none}}
.dtdc-lg-logo span{display:block;height:100%;width:3px;background:#fff;border-radius:1px;transform-origin:center;animation:dtdc-bar 1.8s ease-in-out infinite;animation-delay:calc(var(--i) * .09s)}
.dtdc-lg-logo span:nth-child(3n+1){height:100%}
.dtdc-lg-logo span:nth-child(3n+2){height:84%}
.dtdc-lg-logo span:nth-child(3n){height:68%}
.dtdc-lg-logo span:nth-child(even){width:2px}
.dtdc-lg-logo span:nth-child(5n){width:4px}
@keyframes dtdc-bar{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.55)}}
.dtdc-laser{position:absolute;left:6px;right:6px;top:12%;height:2px;border-radius:2px;background:#fff;font-style:normal;
	box-shadow:0 0 8px 2px rgba(255,255,255,.95),0 0 18px 5px rgba(255,90,90,.85);animation:dtdc-scan 2.2s ease-in-out infinite alternate}
@keyframes dtdc-scan{from{top:14%}to{top:82%}}

.dtdc-lg-title{margin:0 0 4px;padding:0;text-align:center;font-size:27px;font-weight:800;letter-spacing:-.3px;color:#0f172a;animation:dtdc-field .6s .2s cubic-bezier(.2,.8,.2,1) both}
.dtdc-lg-sub{margin:0 0 22px;text-align:center;font-size:14px;color:#64748b;animation:dtdc-field .6s .24s cubic-bezier(.2,.8,.2,1) both}

@keyframes dtdc-field{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.dtdc-lg-form{margin:0}
.dtdc-lg-field,.dtdc-lg-check,.dtdc-lg-btn{opacity:0;animation:dtdc-field .6s var(--d,.2s) cubic-bezier(.2,.8,.2,1) forwards}

.dtdc-lg-field{position:relative;margin:0 0 14px}
.dtdc-lg-field input{
	display:block;width:100%;height:58px;margin:0;padding:23px 48px 6px 48px;
	font-size:16px;color:#0f172a;background:#f8fafc;border:1.5px solid #dfe3ea;border-radius:15px;outline:0;box-shadow:none;
	transition:border-color .2s,box-shadow .2s,background .2s;-webkit-appearance:none;appearance:none;
}
.dtdc-lg-field input:focus{border-color:var(--r);background:#fff;box-shadow:0 0 0 4px rgba(215,25,32,.13)}
.dtdc-lg-field label{
	position:absolute;left:48px;top:18px;margin:0;font-size:16px;color:#7b8794;pointer-events:none;
	transform-origin:left top;transition:transform .2s,color .2s;
}
.dtdc-lg-field input:focus + label,
.dtdc-lg-field input:not(:placeholder-shown) + label,
.dtdc-lg-field input:-webkit-autofill + label{transform:translateY(-11px) scale(.76);color:var(--r);font-weight:600}
.dtdc-lg-field .ic{position:absolute;left:15px;top:18px;width:22px;height:22px;fill:none;stroke:#94a3b8;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s,transform .2s}
.dtdc-lg-field:focus-within .ic{stroke:var(--r);transform:scale(1.08)}
.dtdc-lg-field input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px #f8fafc inset;-webkit-text-fill-color:#0f172a}

.dtdc-eye{position:absolute;right:6px;top:7px;width:44px;height:44px;border:0;background:transparent;border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.dtdc-eye svg{width:22px;height:22px;fill:none;stroke:#94a3b8;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}
.dtdc-eye:hover svg,.dtdc-eye.is-on svg{stroke:var(--r)}

.dtdc-lg-check{display:flex;align-items:center;gap:10px;margin:2px 0 16px;font-size:14.5px;color:#334155;cursor:pointer;user-select:none;-webkit-user-select:none;min-height:30px}
.dtdc-lg-check input{position:absolute;opacity:0;width:0;height:0}
.dtdc-lg-check .box{position:relative;width:22px;height:22px;border-radius:7px;border:1.5px solid #cbd5e1;background:#fff;flex:none;transition:.18s}
.dtdc-lg-check .box::after{content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(0);transition:transform .18s}
.dtdc-lg-check input:checked + .box{background:var(--r);border-color:var(--r)}
.dtdc-lg-check input:checked + .box::after{transform:rotate(45deg) scale(1)}
.dtdc-lg-check input:focus-visible + .box{box-shadow:0 0 0 4px rgba(215,25,32,.2)}

.dtdc-lg-err{margin:0 0 14px;padding:10px 13px;border-radius:12px;background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;font-size:13.5px;font-weight:600;animation:dtdc-field .3s ease both}
.dtdc-lg-err[hidden]{display:none}

.dtdc-lg-btn{
	position:relative;display:block;width:100%;height:58px;border:0;border-radius:15px;overflow:hidden;cursor:pointer;
	background:linear-gradient(135deg,#e11d28,#b3141a);color:#fff;font-size:17px;font-weight:800;letter-spacing:.2px;
	box-shadow:0 12px 26px rgba(215,25,32,.38);transition:transform .12s,box-shadow .2s,background .3s;
}
.dtdc-lg-btn:hover{box-shadow:0 14px 30px rgba(215,25,32,.5)}
.dtdc-lg-btn:active{transform:scale(.98)}
.dtdc-lg-btn::after{content:"";position:absolute;top:0;bottom:0;width:60px;left:-80px;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:dtdc-sheen 3.6s 1.2s ease-in-out infinite}
@keyframes dtdc-sheen{0%{left:-80px}45%,100%{left:120%}}
.dtdc-lg-btn .t,.dtdc-lg-btn .sp,.dtdc-lg-btn .ok{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:opacity .2s}
.dtdc-lg-btn .t{position:static;transform:none;display:inline-block;line-height:58px}
.dtdc-lg-btn .sp{width:24px;height:24px;border-radius:50%;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;opacity:0;animation:dtdc-spin .7s linear infinite}
@keyframes dtdc-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.dtdc-lg-btn .ok{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0;stroke-dasharray:30;stroke-dashoffset:30}
.dtdc-lg-btn.is-busy{pointer-events:none}
.dtdc-lg-btn.is-busy .t{opacity:0}
.dtdc-lg-btn.is-busy .sp{opacity:1}
.dtdc-lg-btn.is-ok{background:linear-gradient(135deg,#16a34a,#15803d);box-shadow:0 12px 26px rgba(22,163,74,.4);pointer-events:none}
.dtdc-lg-btn.is-ok .t,.dtdc-lg-btn.is-ok .sp{opacity:0}
.dtdc-lg-btn.is-ok .ok{opacity:1;animation:dtdc-check .45s .05s ease forwards}
@keyframes dtdc-check{to{stroke-dashoffset:0}}
.dtdc-lg-btn:disabled{opacity:1}

.dtdc-lg-help{margin:18px 0 0;text-align:center;font-size:13.5px;line-height:1.45;color:#475569;animation:dtdc-field .6s .55s cubic-bezier(.2,.8,.2,1) both}
.dtdc-lg-help a{color:#16a34a;font-weight:700;text-decoration:none;white-space:nowrap}
.dtdc-lg-help a:hover{text-decoration:underline}
.dtdc-lg-ft{margin-top:20px;text-align:center;font-size:13px;color:#94a3b8;animation:dtdc-field .6s .6s cubic-bezier(.2,.8,.2,1) both}
.dtdc-lg-ft strong{color:#0f172a}

@media (prefers-reduced-motion:reduce){
	.dtdc-lg *,.dtdc-lg *::before,.dtdc-lg *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important}
}

/* ---------- Admin: stats, filters, accounts ---------- */
.dtdc-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:0 0 12px}
.dtdc-stat{background:#fff;border:1px solid var(--dtdc-line);border-radius:14px;padding:12px 14px}
.dtdc-stat b{display:block;font-size:24px;line-height:1.1;color:var(--dtdc-ink)}
.dtdc-stat span{font-size:12.5px;color:var(--dtdc-mut)}
.dtdc-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin:0 0 12px}
.dtdc-filters label{display:block;font-size:12px;font-weight:600;color:#374151;margin:0 0 3px}
.dtdc-badge-ok{background:#16a34a;color:#fff}
.dtdc-badge-off{background:#9ca3af;color:#fff}
.dtdc-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.dtdc-grid2 label{display:block;font-weight:600;font-size:13px;margin:0 0 4px}
.dtdc-grid2 input[type=text],.dtdc-grid2 input[type=password]{width:100%}
.dtdc-pw{display:flex;gap:6px}
.dtdc-pw input{flex:1;min-width:0}
.dtdc-acts a,.dtdc-acts button{margin-right:6px}
.dtdc-linkbtn{background:none;border:0;padding:0;color:#2271b1;cursor:pointer;text-decoration:underline;font-size:inherit}
.dtdc-linkbtn.danger{color:#b32d2e}


/* ---------- Print/label sizing fix ----------
   The print root lives outside .dtdc-app, so box-sizing must be set here. Without it, padding and
   border are added to each label's width/height and labels overflow their cells (no visible gap). */
.dtdc-sheet,.dtdc-sheet *,.dtdc-sheet *::before,.dtdc-sheet *::after,
.dtdc-tpage,.dtdc-tpage *,.dtdc-tpage *::before,.dtdc-tpage *::after,
.dtdc-label,.dtdc-label *{box-sizing:border-box}
.dtdc-sheet{position:relative}
.dtdc-grid{width:100%;height:100%}
.dtdc-slot{min-width:0;min-height:0}

/* ---------- Tabs (Barcode / Shipping) ---------- */
.dtdc-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:#e5e7eb;padding:4px;border-radius:12px;margin:0 0 12px}
.dtdc-tabs button{appearance:none;border:0;background:transparent;border-radius:9px;padding:11px 6px;font-size:15px;font-weight:700;color:#374151;cursor:pointer;min-height:46px}
.dtdc-tabs button.is-on{background:#fff;color:var(--dtdc-red,#d71920);box-shadow:0 1px 3px rgba(0,0,0,.12)}
#dtdc-pane-bc[hidden],#dtdc-pane-ship[hidden]{display:none!important}

/* ---------- Shipping form ---------- */
.dtdc-sh-hd{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px;font-size:15px}
.dtdc-sh-rm{appearance:none;border:0;background:none;color:#b32d2e;font-size:13px;font-weight:600;cursor:pointer;padding:6px}
.dtdc-sh-card .dtdc-row{align-items:end}
.dtdc-sh-card .dtdc-row > div{min-width:0}
.dtdc-sh-card .dtdc-hint-tight{margin:-4px 0 10px}
.dtdc-app textarea.dtdc-ta{min-height:84px;resize:vertical;line-height:1.35;font-family:inherit}
.dtdc-app .dtdc-awb{font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.dtdc-app select.dtdc-in{appearance:auto}
.dtdc-sh-add{width:100%;margin:0 0 12px;min-height:48px;border-style:dashed}
.dtdc-badge-ship{background:#1c3f94;color:#fff}
.dtdc-badge-prev{background:#e5e7eb;color:#374151}
.dtdc-badge-print{background:#16a34a;color:#fff}
.dtdc-badge-png{background:#7c3aed;color:#fff}
.dtdc-badge-bad{background:#b32d2e;color:#fff}
.dtdc-det{margin-top:6px;font-size:12.5px}
.dtdc-det summary{cursor:pointer;color:#1c3f94;font-weight:600}
.dtdc-det ul{margin:6px 0 0 16px;list-style:disc}
.dtdc-det li{margin:0 0 4px}

/* locked fields (Order ID / Seller without admin access) */
.dtdc-locked .dtdc-in,.dtdc-app .dtdc-in:disabled{background:#f3f4f6;color:#6b7280;cursor:not-allowed;border-style:dashed}
.dtdc-locked .dtdc-lbl::after{content:"\1F512  Unlocked in PRO PLAN";display:block;margin-top:2px;font-weight:600;color:#9ca3af;font-size:11.5px}

/* ---------- Shipping label artwork (screen + print; design by gkgos.in) ---------- */
.dtdc-sl,.dtdc-sl *,.dtdc-sl *::before,.dtdc-sl *::after{box-sizing:border-box}
.dtdc-sl{
	display:flex;flex-direction:column;background:#fff;color:#000;overflow:hidden;text-align:left;
	font-family:Arial,Helvetica,sans-serif;line-height:1.18;
}
.dtdc-sl-strip{display:flex;align-items:center;justify-content:space-between;flex:none}
.dtdc-sl-top{display:flex;align-items:flex-start;flex:none}
.dtdc-sl-left{flex:none;min-width:0}
.dtdc-sl-right{flex:1 1 0;min-width:0}
.dtdc-sl-svc{font-weight:800;white-space:nowrap;overflow:hidden;color:#000;flex:1 1 0;min-width:0}
.dtdc-sl .dtdc-sl-logo{display:block;width:auto;max-width:100%;object-fit:contain;object-position:left center}
.dtdc-sl-meta{color:#000;font-weight:500}
.dtdc-sl-meta div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dtdc-sl-bc{display:block}
.dtdc-sl-awb{text-align:center;white-space:nowrap;overflow:hidden;font-weight:500;letter-spacing:.1mm}
.dtdc-sl-hr{border-top:solid #000;flex:none;height:0}
.dtdc-sl-to{font-weight:400;flex:none}
.dtdc-sl-name{font-weight:800;text-transform:uppercase;white-space:nowrap;overflow:hidden;flex:none}
.dtdc-sl-addr{flex:1 1 0;min-height:0;overflow:hidden;white-space:pre-line;line-height:1.35;word-break:break-word}
.dtdc-sl-city{font-weight:800;white-space:nowrap;overflow:hidden;flex:none}
.dtdc-sl-row{display:flex;align-items:center;justify-content:space-between;flex:none}
.dtdc-sl-phone{font-weight:800;white-space:nowrap;min-width:0}
.dtdc-sl-cod{font-weight:800;white-space:nowrap;flex:none;line-height:1.1}
.dtdc-sl-foot{text-align:right;color:#111;flex:none}

/* ---------- Home: greeting + option cards ---------- */
.dtdc-tabs{grid-template-columns:54px 1fr 1fr}
.dtdc-tabs[hidden],#dtdc-pane-home[hidden]{display:none!important}
.dtdc-tabs .dtdc-tab-home{display:flex;align-items:center;justify-content:center;padding:0}
.dtdc-tabs .dtdc-tab-home svg{width:22px;height:22px;fill:none;stroke:#374151;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dtdc-tabs .dtdc-tab-home:hover svg{stroke:var(--dtdc-red,#d71920)}

.dtdc-home{padding:4px 0 8px}
.dtdc-greet{margin:6px 2px 18px;animation:dtdc-rise .5s ease both}
.dtdc-greet-sub{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--dtdc-mut,#6b7280)}
.dtdc-greet-ic{display:inline-block;font-size:20px;animation:dtdc-bob 3.2s ease-in-out infinite}
.dtdc-app .dtdc-greet-hi{margin:4px 0 2px!important;padding:0!important;font-size:30px!important;line-height:1.15!important;font-weight:800!important;color:var(--dtdc-ink,#111827)!important;letter-spacing:-.3px}
.dtdc-greet-name{background:linear-gradient(90deg,#d71920,#ff6b6b,#d71920);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:dtdc-grad 5s linear infinite;word-break:break-word}
.dtdc-wave{display:inline-block;transform-origin:70% 70%;animation:dtdc-wave 2.4s ease-in-out infinite;font-size:26px}
.dtdc-greet-q{margin:4px 0 0;color:var(--dtdc-mut,#6b7280);font-size:15px}

.dtdc-app .dtdc-opt{
	appearance:none;display:block;width:100%;text-align:left;cursor:pointer;
	background:#fff;border:1.5px solid var(--dtdc-line,#e5e7eb);border-radius:20px;padding:0;margin:0 0 16px;
	box-shadow:0 2px 10px rgba(17,24,39,.06);overflow:hidden;font-family:inherit;color:inherit;
	transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
	animation:dtdc-rise .55s ease both;position:relative;-webkit-tap-highlight-color:transparent;
}
.dtdc-app .dtdc-opt-bc{animation-delay:.08s}
.dtdc-app .dtdc-opt-ship{animation-delay:.18s}
.dtdc-app .dtdc-opt:hover,.dtdc-app .dtdc-opt:focus-visible{transform:translateY(-4px);border-color:var(--dtdc-red,#d71920);box-shadow:0 12px 28px rgba(215,25,32,.16);outline:0}
.dtdc-app .dtdc-opt:active{transform:translateY(-1px) scale(.99)}
.dtdc-opt-pv{display:flex;align-items:center;justify-content:center;height:190px;background:linear-gradient(135deg,#f8fafc,#eef2f7);position:relative;overflow:hidden}
.dtdc-opt-pv::before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(215,25,32,.10),transparent 70%);top:-60px;right:-40px;animation:dtdc-pulse 4s ease-in-out infinite}
.dtdc-opt-tx{display:block;padding:14px 16px 16px;position:relative}
.dtdc-opt-tt{display:block;font-size:20px;font-weight:800;color:var(--dtdc-ink,#111827);margin:0 0 4px}
.dtdc-opt-ds{display:block;font-size:14px;color:var(--dtdc-mut,#6b7280);line-height:1.4;padding-right:6px}
.dtdc-opt-go{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:8px 14px;border-radius:999px;background:var(--dtdc-red,#d71920);color:#fff;font-size:14px;font-weight:700;transition:gap .2s ease,background .2s ease}
.dtdc-opt-go svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease}
.dtdc-opt:hover .dtdc-opt-go{background:var(--dtdc-red-d,#b3141a)}
.dtdc-opt:hover .dtdc-opt-go svg{transform:translateX(4px)}

/* mini A4 sheet of barcode stickers */
.dtdc-mini-sheet{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:5px;width:150px;height:170px;padding:10px;background:#fff;border-radius:6px;box-shadow:0 8px 22px rgba(0,0,0,.14);overflow:hidden;animation:dtdc-float 4.2s ease-in-out infinite;transform:rotate(-3deg)}
.dtdc-mini-st{display:flex;flex-direction:column;justify-content:center;gap:3px;border:1px solid #cfd6df;border-radius:3px;padding:3px;opacity:0;animation:dtdc-pop .5s ease forwards}
.dtdc-mini-st i{display:block;height:15px;background:repeating-linear-gradient(90deg,#111 0 1px,transparent 1px 3px,#111 3px 5px,transparent 5px 6px,#111 6px 7px,transparent 7px 9px)}
.dtdc-mini-st b{display:block;height:2px;background:#9aa4b2;border-radius:2px;width:70%;margin:0 auto}
.dtdc-mini-st:nth-child(1){animation-delay:.15s}.dtdc-mini-st:nth-child(2){animation-delay:.22s}.dtdc-mini-st:nth-child(3){animation-delay:.29s}.dtdc-mini-st:nth-child(4){animation-delay:.36s}
.dtdc-mini-st:nth-child(5){animation-delay:.43s}.dtdc-mini-st:nth-child(6){animation-delay:.50s}.dtdc-mini-st:nth-child(7){animation-delay:.57s}.dtdc-mini-st:nth-child(8){animation-delay:.64s}
.dtdc-mini-st:nth-child(9){animation-delay:.71s}.dtdc-mini-st:nth-child(10){animation-delay:.78s}.dtdc-mini-st:nth-child(11){animation-delay:.85s}.dtdc-mini-st:nth-child(12){animation-delay:.92s}
.dtdc-mini-scan{position:absolute;left:0;right:0;top:0;height:26px;background:linear-gradient(180deg,transparent,rgba(215,25,32,.28),transparent);animation:dtdc-scan 2.6s ease-in-out infinite;pointer-events:none}

/* mini shipping label + vertical thermal label behind it */
.dtdc-mini-thermal{position:absolute;left:calc(50% - 128px);top:22px;display:flex;flex-direction:column;gap:6px;width:72px;height:146px;padding:9px 8px;background:#fff;border:1.5px solid #111;border-radius:3px;box-shadow:0 8px 20px rgba(0,0,0,.12);transform:rotate(-6deg);animation:dtdc-float 4.8s ease-in-out infinite reverse}
.dtdc-mini-thermal i{display:block;height:5px;background:#c3cad5;border-radius:2px}
.dtdc-mini-thermal i:nth-child(1){height:22px;background:repeating-linear-gradient(90deg,#111 0 1px,transparent 1px 3px,#111 3px 5px,transparent 5px 6px)}
.dtdc-mini-thermal i:nth-child(2){width:60%;background:#111;height:6px}
.dtdc-mini-thermal i:nth-child(3){width:90%}
.dtdc-mini-thermal i:nth-child(4){width:75%}
.dtdc-mini-thermal b{display:block;margin-top:auto;height:12px;border:1.5px solid #111;border-radius:2px}
.dtdc-mini-label{position:relative;display:block;width:196px;height:138px;margin-left:46px;padding:9px 10px;background:#fff;border:2px solid #111;border-radius:3px;box-shadow:0 10px 26px rgba(0,0,0,.18);overflow:hidden;animation:dtdc-float 4s ease-in-out infinite;transform:rotate(2deg)}
.dtdc-ml-top{display:flex;gap:8px}
.dtdc-ml-l{display:block;flex:1}
.dtdc-ml-l u{display:block;height:5px;width:70%;background:#111;border-radius:1px;margin-bottom:5px;text-decoration:none}
.dtdc-ml-l em{display:block;height:15px;width:62%;background:linear-gradient(100deg,#1c3f94 70%,#d71920 70% 84%,transparent 84%);border-radius:2px;transform:skewX(-12deg);margin-bottom:5px}
.dtdc-ml-l s{display:block;height:3px;width:80%;background:#aab3c0;border-radius:2px;text-decoration:none}
.dtdc-ml-bc{display:block;width:70px;height:28px;background:repeating-linear-gradient(90deg,#111 0 1px,transparent 1px 3px,#111 3px 5px,transparent 5px 6px,#111 6px 7px,transparent 7px 9px);animation:dtdc-bars 2.2s ease-in-out infinite}
.dtdc-ml-hr{display:block;height:2px;background:#111;margin:7px 0 6px}
.dtdc-ml-name{display:block;height:8px;width:45%;background:#111;border-radius:2px;margin-bottom:5px}
.dtdc-ml-ln{display:block;height:4px;width:88%;background:#b4bcc8;border-radius:2px;margin-bottom:4px}
.dtdc-ml-ln2{width:66%}
.dtdc-ml-row{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.dtdc-ml-ph{display:block;height:6px;width:46%;background:#111;border-radius:2px}
.dtdc-ml-cod{display:block;border:1.5px solid #111;border-radius:2px;padding:2px 8px;font-size:9px;font-weight:800;color:#111;line-height:1.2}

@keyframes dtdc-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes dtdc-float{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes dtdc-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes dtdc-scan{0%{top:-30px}100%{top:100%}}
@keyframes dtdc-bars{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes dtdc-pulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.15);opacity:.6}}
@keyframes dtdc-wave{0%,60%,100%{transform:rotate(0)}10%,30%{transform:rotate(16deg)}20%,40%{transform:rotate(-10deg)}50%{transform:rotate(8deg)}}
@keyframes dtdc-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes dtdc-grad{to{background-position:200% 0}}

@media (min-width:700px){
	.dtdc-home{display:grid;grid-template-columns:1fr 1fr;gap:16px}
	.dtdc-home .dtdc-greet{grid-column:1/-1}
	.dtdc-app .dtdc-opt{margin:0}
}
@media (prefers-reduced-motion:reduce){
	.dtdc-greet,.dtdc-opt,.dtdc-mini-sheet,.dtdc-mini-label,.dtdc-mini-thermal,.dtdc-mini-scan,.dtdc-ml-bc,.dtdc-wave,.dtdc-greet-ic,.dtdc-greet-name,.dtdc-opt-pv::before{animation:none!important}
	.dtdc-mini-st{opacity:1;animation:none!important}
}

/* ---------- Desktop: form on the left, live preview on the right (sticky) ---------- */
@media (min-width:900px){
	#dtdc-app.dtdc-app{max-width:1180px}
	.admin-bar #dtdc-app,.dtdc-admin-wrap #dtdc-app.dtdc-app{max-width:1180px}
	#dtdc-app .dtdc-cols{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:20px;align-items:start}
	#dtdc-app .dtdc-col-main,#dtdc-app .dtdc-col-side{min-width:0}
	#dtdc-app .dtdc-col-side{position:sticky;top:16px}
	#dtdc-app[data-ctx="admin"] .dtdc-col-side{top:48px}
	#dtdc-app .dtdc-col-side .dtdc-card{margin-bottom:0}
	#dtdc-app .dtdc-col-side .dtdc-pv-box{max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px);overflow:auto}
	#dtdc-app[data-ctx="admin"] .dtdc-col-side .dtdc-pv-box{max-height:calc(100vh - 190px)}
}


/* ---------- Print Logs: label viewer (admin) ---------- */
.dtdc-viewbtn{display:inline-flex;align-items:center;gap:4px;margin:6px 0 0;padding:3px 10px;border:1px solid #1c3f94;border-radius:6px;background:#fff;color:#1c3f94;font-size:12.5px;font-weight:600;cursor:pointer}
.dtdc-viewbtn:hover{background:#1c3f94;color:#fff}
.dtdc-viewlink{appearance:none;border:0;background:none;padding:0 0 0 6px;color:#1c3f94;font-size:12px;font-weight:600;text-decoration:underline;cursor:pointer}
.dtdc-lv{position:fixed;inset:0;z-index:100000;display:none;align-items:center;justify-content:center;background:rgba(15,23,42,.72);padding:16px}
.dtdc-lv.is-on{display:flex}
.dtdc-lv-box{background:#fff;border-radius:14px;max-width:96vw;max-height:94vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.4);overflow:hidden}
.dtdc-lv-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid #e5e7eb;font-size:14px}
.dtdc-lv-hd strong{font-size:15px}
.dtdc-lv-x{appearance:none;border:0;background:none;font-size:26px;line-height:1;cursor:pointer;color:#374151;padding:0 4px}
.dtdc-lv-body{padding:16px;overflow:auto;background:#f3f4f6;display:flex;justify-content:center}
.dtdc-lv-stage{background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.18);flex:none}
.dtdc-lv-ft{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px;border-top:1px solid #e5e7eb}
.dtdc-lv-ft .button{margin:0}
.dtdc-lv-nav{display:flex;align-items:center;gap:8px}
.dtdc-lv-note{padding:8px 16px;background:#fff7ed;color:#9a3412;font-size:12.5px;border-bottom:1px solid #fed7aa}

.dtdc-sl-sp{flex:1 1 0;min-height:0}
/* example (placeholder) values in the on-screen preview: light grey until the staff member types their own */
.dtdc-sl .dtdc-ph{opacity:.3}
.dtdc-plan-box{margin:14px 0;padding:12px 14px;border:1px solid #dbe3f3;border-radius:10px;background:#f8faff}
.dtdc-plan-box h4{margin:0 0 6px;font-size:14px}

/* ---------- Plans: header chip + popup (tech UI, golden & cream) ---------- */
.dtdc-locked{cursor:pointer}
.dtdc-locked .dtdc-in{pointer-events:none}
.dtdc-credit-sw{width:100%}
.dtdc-credit-sw b{font-weight:700;flex:1 1 auto}
.dtdc-credit.dtdc-locked .dtdc-sw span{opacity:.55}
.dtdc-pro-tag{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.8px;padding:2px 7px;border-radius:5px;color:#3b2704;background:linear-gradient(135deg,#fde68a,#e8a91a);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.dtdc-btn.is-pro-locked{position:relative;padding-right:52px}
.dtdc-btn.is-pro-locked::after{content:"PRO";position:absolute;top:50%;right:12px;transform:translateY(-50%);font-size:10px;font-weight:800;letter-spacing:.8px;padding:2px 7px;border-radius:5px;color:#3b2704;background:linear-gradient(135deg,#fde68a,#e8a91a);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

.dtdc-plan-chip{appearance:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border:1px solid transparent;border-radius:999px;padding:5px 12px 5px 10px;font-size:12px;font-weight:600;cursor:pointer;line-height:1.2;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.dtdc-plan-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.dtdc-plan-chip b{font-weight:800;letter-spacing:.8px}
.dtdc-plan-chip.is-free{background:#fdf6e3;color:#8a5d08;border-color:#e6cf93}
.dtdc-plan-chip.is-free::before{animation:dtdc-pl-pulse 2s ease-in-out infinite}
.dtdc-plan-chip.is-pro{background:linear-gradient(135deg,#f8d56b,#d99a0b);color:#3b2704;border-color:#b9810a;box-shadow:0 0 14px rgba(217,154,11,.4)}

.dtdc-pl-lock{overflow:hidden}
.dtdc-pl{--c:#b8860b;--v:#d99a0b;--a:#a8730a;--g:#2f855a;--r:#b91c1c;--bg:#fbf5e6;--pn:#fffaf0;--ln:rgba(168,115,10,.24);--tx:#2b1d06;--mu:#7a6a47;
	--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
	position:fixed;inset:0;z-index:100000;display:none;align-items:flex-end;justify-content:center;background:rgba(43,29,6,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:0}
.dtdc-pl.is-on{display:flex}
.dtdc-pl-box{position:relative;width:100%;max-width:560px;max-height:94vh;display:flex;flex-direction:column;overflow:hidden;border-radius:18px 18px 0 0;color:var(--tx);font-family:inherit;
	background:radial-gradient(120% 60% at 50% -10%,rgba(245,197,66,.35),transparent 60%),radial-gradient(90% 50% at 100% 0%,rgba(217,154,11,.16),transparent 60%),var(--bg);
	border:1px solid var(--ln);box-shadow:0 -12px 60px rgba(43,29,6,.35),0 0 0 1px rgba(217,154,11,.12);animation:dtdc-pl-in .32s cubic-bezier(.2,.8,.2,1) both}
.dtdc-pl-box::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
	background-image:linear-gradient(var(--ln) 1px,transparent 1px),linear-gradient(90deg,var(--ln) 1px,transparent 1px);background-size:28px 28px;
	-webkit-mask-image:linear-gradient(180deg,#000,transparent 55%);mask-image:linear-gradient(180deg,#000,transparent 55%)}
@media (min-width:640px){.dtdc-pl{align-items:center;padding:16px}.dtdc-pl-box{border-radius:18px}}
.dtdc-pl-bar{position:relative;z-index:1;display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--ln);background:rgba(255,250,240,.85)}
.dtdc-pl-dots{display:inline-flex;gap:6px}
.dtdc-pl-dots i{width:9px;height:9px;border-radius:50%;background:#e2d2a6}
.dtdc-pl-dots i:nth-child(1){background:#e8a91a}.dtdc-pl-dots i:nth-child(2){background:#f5c542}.dtdc-pl-dots i:nth-child(3){background:#fde68a}
.dtdc-pl-path{flex:1;font:600 12px var(--mono);color:var(--mu);letter-spacing:.3px}
.dtdc-pl-x{appearance:none;border:1px solid var(--ln);background:#fffdf6;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;cursor:pointer;color:var(--mu);padding:0}
.dtdc-pl-x:hover{color:var(--tx);border-color:var(--c)}
.dtdc-pl-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dtdc-pl-body{position:relative;z-index:1;overflow:auto;padding:14px 14px calc(18px + env(safe-area-inset-bottom,0px));-webkit-overflow-scrolling:touch}

.dtdc-pl-term{border:1px solid var(--ln);border-radius:12px;background:rgba(255,253,246,.9);padding:10px 12px;font:12.5px/1.7 var(--mono);box-shadow:0 2px 10px rgba(168,115,10,.08)}
.dtdc-pl-term .ln{display:flex;gap:10px}
.dtdc-pl-term .k{color:var(--mu);min-width:56px}
.dtdc-pl-term .k::before{content:"> ";color:var(--c)}
.dtdc-pl-term .v{color:var(--tx);word-break:break-word}
.dtdc-pl-term .v.pro{color:#a8730a;font-weight:800}
.dtdc-pl-term .v.free{color:#8a5d08;font-weight:800}
.dtdc-pl-term .v.ok{color:var(--g)}
.dtdc-pl-term .v.warn{color:#b45309}
.dtdc-pl-meter{height:5px;border-radius:9px;background:#efe3bd;margin-top:8px;overflow:hidden}
.dtdc-pl-meter i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,#f5c542,#d99a0b)}
.dtdc-pl-reason{display:flex;gap:10px;align-items:center;margin-top:10px;padding:9px 12px;border-radius:10px;border:1px solid rgba(185,28,28,.35);background:rgba(185,28,28,.06);font-size:13px}
.dtdc-pl-reason b{font:800 11px var(--mono);color:var(--r);letter-spacing:.8px;white-space:nowrap}

.dtdc-pl-hero{text-align:center;margin:18px 0 12px}
.dtdc-pl-hero h3{margin:0;font-size:28px;line-height:1.1;font-weight:800;letter-spacing:-.5px;color:var(--tx)}
.dtdc-pl-hero .grad{background:linear-gradient(120deg,#f0b429,#c98a0a 55%,#8a5d08);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.dtdc-pl-hero .cur{display:inline-block;width:3px;height:.9em;margin-left:5px;vertical-align:-.1em;background:#c98a0a;animation:dtdc-pl-blink 1s steps(2) infinite}
.dtdc-pl-hero p{margin:6px 0 0;color:var(--mu);font-size:13.5px}

.dtdc-pl-mx{border:1px solid var(--ln);border-radius:14px;overflow:hidden;background:rgba(255,253,246,.9);box-shadow:0 2px 10px rgba(168,115,10,.08)}
.dtdc-pl-mx .row{display:grid;grid-template-columns:1fr 54px 64px;align-items:center;border-top:1px solid var(--ln)}
.dtdc-pl-mx .row.hd{border-top:0;background:rgba(245,197,66,.14);font:700 11px var(--mono);letter-spacing:1px;color:var(--mu)}
.dtdc-pl-mx .f{padding:10px 12px;display:flex;flex-direction:column;gap:1px}
.dtdc-pl-mx .f b{font-size:13.5px;font-weight:600;color:var(--tx)}
.dtdc-pl-mx .f small{font-size:11.5px;color:var(--mu)}
.dtdc-pl-mx .hd .f{padding:9px 12px}
.dtdc-pl-mx .c{display:grid;place-items:center;align-self:stretch;text-align:center}
.dtdc-pl-mx .c svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.dtdc-pl-mx .c.yes{color:var(--g)}
.dtdc-pl-mx .c.no{color:#cdbb8a}
.dtdc-pl-mx .c.pro{background:linear-gradient(180deg,rgba(245,197,66,.28),rgba(245,197,66,.10));border-left:1px solid rgba(201,138,10,.4)}
.dtdc-pl-mx .c.pro.yes{color:#a8730a}
.dtdc-pl-mx .hd .c.pro{color:#8a5d08}

.dtdc-pl-sub{font:700 11.5px var(--mono);letter-spacing:1px;color:#a8730a;margin:18px 0 8px}
.dtdc-pl-prices{display:grid;gap:9px}
.dtdc-pl-price{appearance:none;position:relative;display:flex;align-items:center;gap:12px;width:100%;text-align:left;color:var(--tx);cursor:pointer;font-family:inherit;
	border:1px solid var(--ln);background:rgba(255,253,246,.95);border-radius:13px;padding:13px 14px;transition:border-color .15s,box-shadow .15s,transform .15s}
.dtdc-pl-price:hover{border-color:rgba(201,138,10,.7)}
.dtdc-pl-price .rd{flex:none;width:18px;height:18px;border-radius:50%;border:2px solid #d8c48e;position:relative;transition:.15s}
.dtdc-pl-price .t{flex:1;display:flex;flex-direction:column;gap:2px}
.dtdc-pl-price .t b{font-size:15px;font-weight:700}
.dtdc-pl-price .t small{font:12px var(--mono);color:var(--mu)}
.dtdc-pl-price .a{font:800 21px var(--mono);letter-spacing:-.5px}
.dtdc-pl-price.is-sel{border-color:#c98a0a;background:linear-gradient(180deg,rgba(245,197,66,.22),rgba(255,253,246,.95));box-shadow:0 0 0 1px rgba(201,138,10,.5),0 8px 26px rgba(217,154,11,.22)}
.dtdc-pl-price.is-sel .rd{border-color:#c98a0a}
.dtdc-pl-price.is-sel .rd::after{content:"";position:absolute;inset:3px;border-radius:50%;background:linear-gradient(135deg,#f5c542,#c98a0a);box-shadow:0 0 8px rgba(217,154,11,.7)}
.dtdc-pl-price.is-sel .t small{color:#8a5d08}
.dtdc-pl-tag{position:absolute;top:-9px;right:12px;font:800 10px var(--mono);letter-spacing:.8px;padding:2px 8px;border-radius:999px;color:#3b2704;background:linear-gradient(135deg,#fde68a,#e8a91a);box-shadow:0 0 12px rgba(217,154,11,.4)}

.dtdc-pl-btn{appearance:none;display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:50px;border:0;border-radius:13px;font-size:15px;font-weight:700;cursor:pointer;text-decoration:none;margin:10px 0 0;font-family:inherit;position:relative;transition:transform .12s,filter .12s}
.dtdc-pl-btn:active{transform:scale(.985)}
.dtdc-pl-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.dtdc-pl-btn.go{margin-top:14px;color:#2b1d06;background:linear-gradient(120deg,#fde68a,#f5c542 45%,#d99a0b);box-shadow:0 10px 28px rgba(217,154,11,.4);border:1px solid #c98a0a}
.dtdc-pl-btn.go:hover{filter:brightness(1.05)}
.dtdc-pl-btn.upi{color:#5b3b04;background:#fff7dc;border:1px solid #e0c36a}
.dtdc-pl-btn.wa{color:#fff;background:linear-gradient(120deg,#2f855a,#22724a)}
.dtdc-pl-btn.ghost{color:var(--mu);background:transparent;border:1px solid var(--ln)}
.dtdc-pl-btn.ghost:hover{color:var(--tx);border-color:var(--c)}
.dtdc-pl-note{font-size:12.5px;color:var(--mu);margin:10px 0 0;text-align:center}
.dtdc-pl-warn{background:rgba(245,197,66,.2);border:1px solid rgba(201,138,10,.5);color:#6b4a06;border-radius:10px;padding:10px 12px;font-size:13px;margin:10px 0}

.dtdc-pl-flow{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 14px;padding:0}
.dtdc-pl-flow li{display:flex;align-items:center;gap:8px;border:1px solid var(--ln);border-radius:10px;padding:7px 9px;font:700 11px var(--mono);letter-spacing:.8px;color:var(--mu);background:rgba(255,253,246,.85)}
.dtdc-pl-flow li b{color:#cdbb8a}
.dtdc-pl-flow li.on{color:#6b4a06;border-color:#c98a0a;background:rgba(245,197,66,.28)}
.dtdc-pl-flow li.on b{color:#a8730a}
.dtdc-pl-pay{text-align:center}
.dtdc-pl-amt small{display:block;font:700 11.5px var(--mono);letter-spacing:1px;color:var(--mu)}
.dtdc-pl-amt strong{display:block;font:800 40px/1.15 var(--mono);letter-spacing:-1px;color:var(--tx);text-shadow:0 0 24px rgba(245,197,66,.7)}
.dtdc-pl-qrwrap{display:flex;justify-content:center;margin:12px 0 4px}
.dtdc-pl-qr{position:relative;width:236px;max-width:100%;padding:16px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px rgba(201,138,10,.55),0 10px 34px rgba(217,154,11,.35);overflow:hidden}
.dtdc-pl-qr canvas,.dtdc-pl-qr img{display:block;width:100%;height:auto;image-rendering:pixelated;image-rendering:crisp-edges}
.dtdc-pl-qr .cn{position:absolute;width:22px;height:22px;border:3px solid #d99a0b;pointer-events:none}
.dtdc-pl-qr .tl{top:5px;left:5px;border-right:0;border-bottom:0;border-top-left-radius:8px}
.dtdc-pl-qr .tr{top:5px;right:5px;border-left:0;border-bottom:0;border-top-right-radius:8px}
.dtdc-pl-qr .bl{bottom:5px;left:5px;border-right:0;border-top:0;border-bottom-left-radius:8px}
.dtdc-pl-qr .br{bottom:5px;right:5px;border-left:0;border-top:0;border-bottom-right-radius:8px}
.dtdc-pl-qr .scan{position:absolute;left:10px;right:10px;top:10px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#e8a91a,transparent);box-shadow:0 0 12px 2px rgba(232,169,26,.7);animation:dtdc-pl-scan 2.6s ease-in-out infinite;pointer-events:none}
.dtdc-pl-qr.is-empty{display:grid;place-items:center;min-height:200px;background:#fffaf0}
.dtdc-pl-qr .em{color:var(--mu);font:12px var(--mono)}
.dtdc-pl-upi{display:flex;align-items:center;gap:10px;margin:12px 0 0;padding:8px 8px 8px 12px;border:1px dashed rgba(201,138,10,.7);border-radius:11px;background:rgba(245,197,66,.14);text-align:left}
.dtdc-pl-upi .k{font:700 10.5px var(--mono);letter-spacing:1px;color:#a8730a}
.dtdc-pl-upi .v{flex:1;min-width:0;font:700 14px var(--mono);color:var(--tx);word-break:break-all;user-select:all}
.dtdc-pl-upi .cp{appearance:none;flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:9px;border:1px solid var(--ln);background:#fffdf6;color:#a8730a;cursor:pointer;padding:0}
.dtdc-pl-upi .cp svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.dtdc-pl-upi .cp.done{color:var(--g);border-color:var(--g)}
.dtdc-pl-steps{text-align:left;margin:16px 0 4px;padding:0 0 0 20px;font-size:13.5px;line-height:1.6;color:var(--mu)}
.dtdc-pl-steps li{margin:0 0 3px}
.dtdc-pl-steps li::marker{color:#a8730a;font-family:var(--mono);font-weight:700}

@keyframes dtdc-pl-in{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}
@keyframes dtdc-pl-blink{50%{opacity:0}}
@keyframes dtdc-pl-pulse{50%{opacity:.35}}
@keyframes dtdc-pl-scan{0%,100%{top:10px}50%{top:calc(100% - 12px)}}
@media (max-width:380px){.dtdc-pl-mx .row{grid-template-columns:1fr 46px 54px}.dtdc-pl-price .a{font-size:18px}.dtdc-pl-amt strong{font-size:34px}}
@media (prefers-reduced-motion:reduce){.dtdc-pl-box,.dtdc-pl-qr .scan,.dtdc-pl-hero .cur,.dtdc-plan-chip::before{animation:none!important}}