/* ============================================================
   ShortLink Studio — Mac OS Premium Theme
   โทนสบายตา · glass morphism · pixel-perfect · responsive
   ============================================================ */
:root {
    --bg: #eef1f6;
    --bg-2: #f6f7fb;
    --ink: #1d1d1f;
    --muted: #6e6e73;
    --line: rgba(0, 0, 0, .08);
    --glass: rgba(255, 255, 255, .72);
    --glass-2: rgba(255, 255, 255, .85);
    --primary: #0a84ff;
    --primary-2: #5e5ce6;
    --grad: linear-gradient(135deg, #0a84ff 0%, #5e5ce6 55%, #bf5af2 100%);
    --grad-soft: linear-gradient(135deg, rgba(10,132,255,.14), rgba(191,90,242,.14));
    --green: #30d158;
    --red: #ff453a;
    --amber: #ff9f0a;
    --radius: 22px;
    --radius-sm: 14px;
    --shadow: 0 20px 60px rgba(15, 23, 42, .14);
    --shadow-sm: 0 6px 20px rgba(15, 23, 42, .08);
    --tt: .35s cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Sarabun', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--ink);
    background:
        radial-gradient(1000px 560px at 12% -8%, #e7ecff 0%, transparent 60%),
        radial-gradient(900px 520px at 92% 4%, #ffe9fb 0%, transparent 55%),
        radial-gradient(800px 800px at 50% 120%, #e3fbf1 0%, transparent 60%),
        var(--bg);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}
.font-kanit { font-family: 'Kanit', sans-serif; }
a { color: inherit; }
::selection { background: rgba(10, 132, 255, .22); }

/* ── ลาย mesh เคลื่อนไหวจาง ๆ ด้านหลัง ── */
.mesh { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
.mesh span {
    position: absolute; border-radius: 50%; filter: blur(80px); opacity: .5;
    animation: float 18s ease-in-out infinite;
}
.mesh span:nth-child(1){ width:420px;height:420px;background:#7cc4ff;top:-120px;left:-80px }
.mesh span:nth-child(2){ width:380px;height:380px;background:#d0a2ff;top:30%;right:-100px;animation-delay:-6s }
.mesh span:nth-child(3){ width:340px;height:340px;background:#8affc9;bottom:-120px;left:30%;animation-delay:-12s }
@keyframes float { 0%,100%{transform:translate(0,0)} 50%{transform:translate(30px,-40px)} }

/* ── โครง Mac window ── */
.shell { max-width: 1200px; margin: 0 auto; padding: 30px 20px 60px; }
.win {
    background: var(--glass);
    backdrop-filter: blur(34px) saturate(180%);
    -webkit-backdrop-filter: blur(34px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 26px;
    box-shadow: var(--shadow);
    overflow: hidden;
}
.titlebar {
    height: 52px; display: flex; align-items: center; gap: 14px;
    padding: 0 18px; border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.35));
}
.traffic { display: flex; gap: 9px; }
.tl { width: 13px; height: 13px; border-radius: 50%; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.12); transition: var(--tt); }
.tl.r { background: #ff5f57 } .tl.y { background: #febc2e } .tl.g { background: #28c840 }
.titlebar:hover .tl { filter: brightness(1.05); }
.win-title {
    font-family: 'Kanit'; font-weight: 600; font-size: .92rem; color: #3a3a3c;
    display: flex; align-items: center; gap: 8px; margin: 0 auto;
    position: absolute; left: 50%; transform: translateX(-50%);
}
.win-title .badge-live {
    font-size: .68rem; color: var(--green); background: rgba(48,209,88,.14);
    padding: 2px 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px;
}
.win-title .badge-live::before { content:''; width:6px;height:6px;border-radius:50%;background:var(--green);
    box-shadow:0 0 0 0 rgba(48,209,88,.5); animation: pulse 2s infinite; }
@keyframes pulse { 70%{box-shadow:0 0 0 7px rgba(48,209,88,0)} 100%{box-shadow:0 0 0 0 rgba(48,209,88,0)} }

/* ── HERO ── */
.hero {
    position: relative; overflow: hidden;
    padding: 46px 40px 40px;
    background: var(--grad);
    color: #fff;
}
.hero::after {
    content:''; position:absolute; top:-60%; left:-10%; width:60%; height:220%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
    transform: rotate(18deg); animation: beam 7s ease-in-out infinite;
}
@keyframes beam { 0%,100%{left:-30%} 50%{left:80%} }
.hero .eyebrow { font-size:.8rem; letter-spacing:2px; font-weight:700; opacity:.9;
    font-family:'Courier New',monospace; }
.hero h1 { font-family:'Kanit'; font-weight:800; font-size: clamp(1.7rem,4vw,2.6rem); line-height:1.15; margin:.5rem 0 .6rem; }
.hero p.lead { font-size:1.02rem; opacity:.92; max-width:620px; }
.hero-deco { position:absolute; right:36px; top:50%; transform:translateY(-50%); font-size:120px; opacity:.14; }

/* KPI strip */
.kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:26px; position:relative; z-index:1; }
.kpi {
    background: rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28);
    border-radius:16px; padding:14px 16px; backdrop-filter: blur(8px);
    transition: var(--tt);
}
.kpi:hover { transform: translateY(-3px); background: rgba(255,255,255,.24); }
.kpi .k-ic { font-size:1.1rem; opacity:.9; }
.kpi .k-val { font-family:'Kanit'; font-weight:800; font-size:1.7rem; line-height:1.1; margin-top:4px; }
.kpi .k-lbl { font-size:.8rem; opacity:.88; }

/* ── BODY ── */
.body-pad { padding: 30px 40px 40px; }
.grid-2 { display:grid; grid-template-columns: 1.05fr .95fr; gap: 28px; align-items:start; }

/* Panel */
.panel { background: var(--glass-2); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow: var(--shadow-sm); overflow:hidden; }
.panel-head { padding:18px 22px 4px; }
.panel-head h2 { font-family:'Kanit'; font-weight:700; font-size:1.12rem; display:flex; align-items:center; gap:9px; }
.panel-head .sub { color:var(--muted); font-size:.86rem; margin-top:2px; }
.panel-body { padding: 16px 22px 22px; }

/* Form */
.field { margin-bottom:16px; }
.field label { display:block; font-weight:600; font-size:.86rem; margin-bottom:7px; color:#3a3a3c; }
.control {
    width:100%; border:1.5px solid var(--line); background:#fff; border-radius:var(--radius-sm);
    padding:13px 15px; font:inherit; color:var(--ink); transition: var(--tt); outline:none;
}
.control:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(10,132,255,.14); }
.control::placeholder { color:#b0b0b5; }
.input-group { display:flex; border:1.5px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; background:#fff; transition:var(--tt); }
.input-group:focus-within { border-color:var(--primary); box-shadow:0 0 0 4px rgba(10,132,255,.14); }
.input-group .prefix { display:flex; align-items:center; padding:0 12px; background:#f2f2f7; color:var(--muted);
    font-size:.86rem; border-right:1px solid var(--line); white-space:nowrap; max-width:52%; overflow:hidden; text-overflow:ellipsis; }
.input-group .control { border:0; box-shadow:none !important; border-radius:0; }
.hint { font-size:.78rem; color:var(--muted); margin-top:6px; }
.err-text { font-size:.8rem; color:var(--red); margin-top:6px; display:none; }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
    border:0; border-radius:var(--radius-sm); font-family:'Kanit'; font-weight:600; font-size:.95rem;
    padding:13px 22px; transition: var(--tt); text-decoration:none; position:relative; overflow:hidden; }
.btn-primary { background: var(--grad); color:#fff; box-shadow:0 10px 26px rgba(10,132,255,.36); }
.btn-primary:hover { transform: translateY(-2px); box-shadow:0 16px 34px rgba(10,132,255,.46); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost { background:#fff; border:1.5px solid var(--line); color:var(--ink); }
.btn-ghost:hover { background:#f7f7fb; border-color:#d5d5db; }
.btn-danger { background:linear-gradient(135deg,#ff6b6b,#e03131); color:#fff; box-shadow:0 8px 20px rgba(224,49,49,.32); }
.btn-block { width:100%; }
.btn:disabled { opacity:.6; cursor:not-allowed; transform:none !important; }
.btn .ripple { position:absolute; border-radius:50%; transform:scale(0); background:rgba(255,255,255,.5);
    animation:ripple .6s linear; pointer-events:none; }
@keyframes ripple { to { transform:scale(3.2); opacity:0; } }

/* QR preview */
.qr-stage { display:grid; place-items:center; padding:20px; border-radius:var(--radius-sm);
    background: conic-gradient(from 45deg, #f4f5fa, #eef0f7, #f4f5fa); border:1px solid var(--line); min-height:250px; }
#qrPreview { transition: var(--tt); }
.qr-controls { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px; }
.color-row { display:flex; align-items:center; gap:10px; }
.color-row input[type=color]{ width:44px; height:38px; border:1px solid var(--line); border-radius:10px; padding:2px; background:#fff; cursor:pointer; }
.swatches { display:flex; gap:7px; flex-wrap:wrap; margin-top:8px; }
.swatch { width:26px; height:26px; border-radius:8px; cursor:pointer; border:2px solid #fff; box-shadow:0 0 0 1px var(--line); transition:var(--tt); }
.swatch:hover { transform:scale(1.14); }
.emoji-pick { width:32px; height:32px; border-radius:9px; display:grid; place-items:center; cursor:pointer;
    background:#f2f2f7; border:1px solid var(--line); transition:var(--tt); line-height:1; }
.emoji-pick:hover { transform:translateY(-2px) scale(1.08); background:#fff; box-shadow:var(--shadow-sm); }
.emoji-pick.active { background:var(--grad-soft); border-color:var(--primary); box-shadow:0 0 0 2px rgba(10,132,255,.2); }
.seg { display:flex; background:#f2f2f7; border-radius:11px; padding:4px; gap:4px; }
.seg button { flex:1; border:0; background:transparent; padding:8px 6px; border-radius:8px; font:inherit; font-size:.82rem;
    cursor:pointer; color:var(--muted); transition:var(--tt); }
.seg button.active { background:#fff; color:var(--ink); box-shadow:var(--shadow-sm); font-weight:600; }

/* Toolbar */
.toolbar { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:18px; }
.search-box { flex:1; min-width:200px; position:relative; }
.search-box i { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted); }
.search-box .control { padding-left:40px; }

/* Link cards */
.links-grid { display:grid; grid-template-columns:1fr; gap:14px; }
.link-card {
    background:#fff; border:1px solid var(--line); border-radius:18px; padding:16px 18px;
    display:flex; gap:14px; align-items:center; transition:var(--tt); position:relative; overflow:hidden;
    animation: rise .5s cubic-bezier(.16,1,.3,1) both;
}
.link-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--grad); opacity:.9; }
.link-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-sm); border-color:#dfe3ec; }
.link-card.off { opacity:.62; }
.link-card.off::before { background:#c7c7cc; }
@keyframes rise { from{opacity:0;transform:translateY(14px)} }
.lc-qr { width:58px; height:58px; border-radius:13px; background:#f2f2f7; display:grid; place-items:center; flex-shrink:0; overflow:hidden; }
.lc-qr canvas, .lc-qr img, .lc-qr svg { width:100%; height:100%; }
.lc-main { flex:1; min-width:0; }
.lc-code { font-family:'Kanit'; font-weight:700; font-size:1.02rem; display:flex; align-items:center; gap:8px; }
.lc-code .short { color:var(--primary); }
.lc-target { color:var(--muted); font-size:.84rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lc-meta { display:flex; gap:14px; margin-top:6px; font-size:.78rem; color:var(--muted); flex-wrap:wrap; }
.lc-meta .chip { display:inline-flex; align-items:center; gap:5px; }
.lc-meta .chip-expire { color:#b45309; background:#fef3c7; padding:1px 8px; border-radius:999px; }
.lc-meta .chip-expired { color:#b91c1c; background:#fee2e2; padding:1px 8px; border-radius:999px; font-weight:600; }
.lc-clicks { font-family:'Kanit'; font-weight:800; color:var(--primary); }
.lc-actions { display:flex; gap:6px; flex-shrink:0; }
.icon-btn { width:38px; height:38px; border-radius:11px; border:1px solid var(--line); background:#fff; cursor:pointer;
    display:grid; place-items:center; color:#3a3a3c; transition:var(--tt); font-size:.95rem; }
.icon-btn:hover { background:#f2f2f7; transform:translateY(-2px); }
.icon-btn.danger:hover { background:#ffeceb; color:var(--red); border-color:#ffd5d2; }
.status-dot { width:9px; height:9px; border-radius:50%; }
.status-dot.on { background:var(--green); box-shadow:0 0 8px rgba(48,209,88,.6); }
.status-dot.off { background:#c7c7cc; }

/* Empty & skeleton */
.empty { text-align:center; padding:50px 20px; color:var(--muted); }
.empty .e-ic { width:84px;height:84px;border-radius:24px;background:var(--grad-soft);display:grid;place-items:center;
    margin:0 auto 16px;font-size:38px; }
.empty h3 { font-family:'Kanit'; color:var(--ink); margin-bottom:6px; }
.skel { background:linear-gradient(90deg,#eef0f4 25%,#f6f7fb 50%,#eef0f4 75%); background-size:200% 100%;
    animation:shimmer 1.4s infinite; border-radius:12px; }
@keyframes shimmer { to { background-position:-200% 0; } }
.skel-card { height:90px; margin-bottom:14px; border-radius:18px; }

/* Footer */
.foot { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
    padding:20px 40px; border-top:1px solid var(--line); background:rgba(255,255,255,.5); }
.foot .cpy { font-size:.82rem; color:var(--muted); display:flex; align-items:center; gap:10px; }
.foot .ver { background:var(--grad-soft); color:var(--primary); font-weight:700; padding:2px 10px; border-radius:999px; font-size:.72rem; }
.foot .dev { display:flex; align-items:center; gap:11px; text-decoration:none; }
.foot .dev img { width:38px; height:38px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 2px rgba(10,132,255,.35),0 4px 12px rgba(0,0,0,.12); object-fit:cover; }
.foot .dev .d-lbl { font-size:.7rem; color:var(--muted); }
.foot .dev .d-name { font-family:'Kanit'; font-weight:700; font-size:.9rem; color:var(--ink); }

/* Modal (QR editor) */
.modal-overlay { position:fixed; inset:0; background:rgba(15,23,42,.32); backdrop-filter:blur(6px);
    display:none; align-items:center; justify-content:center; z-index:1000; padding:20px; }
.modal-overlay.show { display:flex; animation:fade .25s; }
@keyframes fade { from{opacity:0} }
.modal { background:var(--glass-2); backdrop-filter:blur(30px); border:1px solid rgba(255,255,255,.6);
    border-radius:24px; box-shadow:0 40px 100px rgba(15,23,42,.3); width:100%; max-width:760px; max-height:90vh; overflow:hidden;
    display:flex; flex-direction:column; animation:pop .3s cubic-bezier(.16,1,.3,1); }
@keyframes pop { from{transform:scale(.94) translateY(10px);opacity:0} }
.modal .titlebar { position:relative; }
.modal-scroll { overflow-y:auto; padding:24px; }

/* toast */
#toast { position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px); opacity:0;
    background:#1d1d1f; color:#fff; padding:13px 22px; border-radius:14px; font-family:'Kanit'; font-weight:600;
    box-shadow:0 16px 40px rgba(0,0,0,.3); z-index:2000; transition:var(--tt); display:flex; align-items:center; gap:9px; }
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ── Responsive ── */
@media (max-width: 920px) {
    .grid-2 { grid-template-columns:1fr; }
    .kpis { grid-template-columns:repeat(2,1fr); }
    .hero-deco { display:none; }
    .body-pad, .hero, .foot { padding-left:22px; padding-right:22px; }
}
@media (max-width: 540px) {
    .shell { padding:14px 10px 40px; }
    .win-title { display:none; }
    .hero { padding:34px 20px 28px; }
    .qr-controls { grid-template-columns:1fr; }
    .link-card { flex-wrap:wrap; }
    .lc-actions { width:100%; justify-content:flex-end; }
    .foot { flex-direction:column-reverse; text-align:center; }
    .modal { max-height:94vh; }
}
@media (prefers-reduced-motion: reduce) { *{ animation:none !important; transition:none !important; } }

/* ───────── ประกาศปิดสร้างลิงก์ชั่วคราว ───────── */
.notice-off {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 20px 22px; border-radius: 16px;
    background: linear-gradient(135deg, rgba(255,159,10,.10), rgba(255,214,10,.06));
    border: 1px solid rgba(255,159,10,.28);
    color: var(--ink, #1d1d1f);
}
.notice-off .bi { font-size: 1.7rem; color: #d68100; margin-top: 2px; }
.notice-off strong { font-family: 'Kanit', sans-serif; font-size: 1.05rem; display: block; margin-bottom: 4px; }
.notice-off p { margin: 0; color: var(--muted, #6e6e73); font-size: .95rem; line-height: 1.55; }