/* CZN URL Shortener – Public CSS v2.1 */
:root{--czn-blue:#2563eb;--czn-blue-dk:#1d4ed8;--czn-blue-lt:#eff6ff;--czn-g50:#f8fafc;--czn-g100:#f1f5f9;--czn-g200:#e2e8f0;--czn-g400:#94a3b8;--czn-g600:#475569;--czn-g800:#1e293b;--czn-green:#16a34a;--czn-red:#dc2626;--r:12px}
.czn-app{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;max-width:660px;margin:0 auto;color:var(--czn-g800);line-height:1.5}

/* App bar */
.czn-app-bar{display:flex;justify-content:space-between;align-items:center;padding:12px 0 16px;border-bottom:1px solid var(--czn-g200);margin-bottom:26px;flex-wrap:wrap;gap:8px}
.czn-brand{display:flex;align-items:center;gap:7px;font-weight:700;font-size:15px;color:var(--czn-blue)}
.czn-bar-section{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.czn-uname{font-size:13px;color:var(--czn-g600);margin-right:4px}

/* Panels */
.czn-panel{animation:czn-in .18s ease}
@keyframes czn-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.czn-panel-h{font-size:21px;font-weight:700;margin:0 0 18px;color:var(--czn-g800)}
.czn-back{background:none;border:none;cursor:pointer;color:var(--czn-blue);font-size:13px;padding:0;margin-bottom:12px;display:block}
.czn-panel-auth{max-width:380px}

/* Buttons */
.czn-btn{display:inline-flex;align-items:center;gap:5px;padding:9px 18px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:background .14s,transform .1s;text-decoration:none;white-space:nowrap;line-height:1}
.czn-btn:active{transform:scale(.97)}
.czn-btn-primary{background:var(--czn-blue);color:#fff}
.czn-btn-primary:hover{background:var(--czn-blue-dk)}
.czn-btn-ghost{background:var(--czn-g100);color:var(--czn-g800)}
.czn-btn-ghost:hover{background:var(--czn-g200)}
.czn-btn-sm{padding:6px 13px;font-size:13px}
.czn-btn-lg{padding:13px 26px;font-size:16px;border-radius:10px}
.czn-btn-full{width:100%;justify-content:center}
.czn-btn-copy{background:var(--czn-g100);color:var(--czn-g800);border-radius:7px;padding:8px 14px}
.czn-btn-copy:hover{background:var(--czn-g200)}

/* Inputs */
.czn-input{width:100%;box-sizing:border-box;padding:11px 13px;border:1.5px solid var(--czn-g200);border-radius:9px;font-size:15px;color:var(--czn-g800);background:#fff;outline:none;transition:border-color .14s,box-shadow .14s}
.czn-input:focus{border-color:var(--czn-blue);box-shadow:0 0 0 3px rgba(37,99,235,.11)}
.czn-input-lg{font-size:16px;padding:14px 15px;border-radius:10px}
.czn-slug-inp{border:none;background:transparent;border-radius:0;box-shadow:none!important;flex:1;padding:8px 10px;font-size:14px}
.czn-req{color:var(--czn-red)}

/* Shorten form */
.czn-row-input{display:flex;gap:9px;margin-bottom:10px;flex-wrap:wrap}
.czn-row-input .czn-input{flex:1;min-width:180px}
.czn-slug-row{display:flex;align-items:center;border:1.5px solid var(--czn-g200);border-radius:9px;overflow:hidden;margin-bottom:10px;max-width:480px}
.czn-slug-pre{padding:8px 11px;background:var(--czn-g100);font-size:12px;color:var(--czn-g400);white-space:nowrap;border-right:1px solid var(--czn-g200)}
.czn-hint{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--czn-g600);background:var(--czn-blue-lt);padding:9px 13px;border-radius:8px;margin-top:6px}
.czn-hint a{color:var(--czn-blue);font-weight:600}
.czn-err{background:#fef2f2;color:var(--czn-red);border:1px solid #fecaca;border-radius:8px;padding:9px 13px;font-size:13px;margin-top:8px}

/* Result */
.czn-result{background:var(--czn-g50);border:1.5px solid var(--czn-g200);border-radius:var(--r);padding:18px 20px;margin-top:14px}
.czn-result-inner{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.czn-result-left{flex:1;min-width:180px}
.czn-result-link{display:block;font-size:18px;font-weight:700;color:var(--czn-blue);text-decoration:none;word-break:break-all;margin-bottom:10px}
.czn-result-link:hover{text-decoration:underline}
.czn-result-meta{font-size:12px;color:var(--czn-g400);margin-top:10px}
.czn-result-qr{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0}
.czn-qr-dl{font-size:12px;color:var(--czn-blue);text-decoration:none}

/* Auth forms */
.czn-auth-form{display:flex;flex-direction:column;gap:0}
.czn-label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:700;color:var(--czn-g600);margin-bottom:13px;text-transform:uppercase;letter-spacing:.4px}
.czn-label .czn-input{font-size:15px}
.czn-switch{font-size:13px;color:var(--czn-g600);margin-top:14px}
.czn-switch a{color:var(--czn-blue);font-weight:600}

/* Dashboard */
.czn-dash-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.czn-link-card{background:#fff;border:1.5px solid var(--czn-g200);border-radius:10px;padding:15px 17px;margin-bottom:10px;transition:box-shadow .14s}
.czn-link-card:hover{box-shadow:0 3px 14px rgba(37,99,235,.09)}
.czn-lc-hdr{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap}
.czn-lc-urls{flex:1;min-width:0}
.czn-lc-short{display:block;font-size:15px;font-weight:700;color:var(--czn-blue);text-decoration:none;word-break:break-all}
.czn-lc-dest{font-size:12px;color:var(--czn-g400);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:320px}
.czn-lc-actions{display:flex;gap:5px;flex-shrink:0;flex-wrap:wrap}
.czn-lc-meta{display:flex;gap:14px;margin-top:9px;font-size:12px;color:var(--czn-g600);flex-wrap:wrap}
.czn-badge{background:var(--czn-blue-lt);color:var(--czn-blue);padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600}
.czn-empty{text-align:center;padding:36px;color:var(--czn-g400);font-size:15px}

/* Stats */
.czn-stat-grid{display:flex;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.czn-stat-pill{flex:1;min-width:90px;background:var(--czn-blue-lt);border-radius:10px;padding:15px;text-align:center}
.czn-stat-pill strong{display:block;font-size:28px;font-weight:700;color:var(--czn-blue)}
.czn-stat-pill span{font-size:11px;color:var(--czn-g600);text-transform:uppercase}
.czn-pub-qr{text-align:center;margin-bottom:16px}
.czn-mini-tbl{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:14px}
.czn-mini-tbl th{font-size:11px;text-transform:uppercase;color:var(--czn-g400);text-align:left;padding:5px 3px;border-bottom:1px solid var(--czn-g200)}
.czn-mini-tbl td{padding:6px 3px;border-bottom:1px solid var(--czn-g100)}
.czn-chart-box{margin-bottom:18px}
.czn-chart-box h4{font-size:12px;text-transform:uppercase;color:var(--czn-g400);margin-bottom:7px}

/* Spinner */
.czn-spin{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:czn-spin .65s linear infinite;vertical-align:middle}
@keyframes czn-spin{to{transform:rotate(360deg)}}

/* Responsive */
@media(max-width:480px){.czn-row-input{flex-direction:column}.czn-btn-lg{width:100%;justify-content:center}.czn-result-inner{flex-direction:column}.czn-lc-hdr{flex-direction:column}}

/* ── Advanced options (logged-in form) ── */
.czn-advanced{background:var(--czn-g50);border:1.5px solid var(--czn-g200);border-radius:10px;padding:16px;margin-bottom:12px}
.czn-adv-row{display:flex;gap:14px;margin-bottom:12px;flex-wrap:wrap}
.czn-adv-field{display:flex;flex-direction:column;gap:5px;flex:1;min-width:180px}
.czn-adv-field-lg{flex:2}
.czn-adv-field-sm{flex:0 0 180px}
.czn-adv-field label{font-size:11px;font-weight:700;color:var(--czn-g600);text-transform:uppercase;letter-spacing:.4px}

/* ── Dashboard form ── */
.czn-dash-form{background:var(--czn-blue-lt);border:1.5px solid #bfdbfe;border-radius:10px;padding:18px 20px;margin-bottom:16px}
.czn-dash-form h3{margin:0 0 14px;font-size:15px;color:var(--czn-blue)}
.czn-df-msg{font-size:13px;padding:3px 8px;border-radius:5px}
.czn-df-msg.ok{background:#dcfce7;color:var(--czn-green)}
.czn-df-msg.err{background:#fee2e2;color:var(--czn-red)}

/* ── Dashboard link cards ── */
.czn-dash-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.czn-link-card{background:#fff;border:1.5px solid var(--czn-g200);border-radius:10px;padding:14px 16px;margin-bottom:10px;transition:box-shadow .14s}
.czn-link-card:hover{box-shadow:0 3px 14px rgba(37,99,235,.09)}
.czn-lc-hdr{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap}
.czn-lc-urls{flex:1;min-width:0}
.czn-lc-short{display:block;font-size:15px;font-weight:700;color:var(--czn-blue);text-decoration:none;word-break:break-all}
.czn-lc-dest{font-size:12px;color:var(--czn-g400);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:320px}
.czn-lc-actions{display:flex;gap:5px;flex-shrink:0;flex-wrap:wrap}
.czn-lc-meta{display:flex;gap:12px;margin-top:9px;font-size:12px;color:var(--czn-g600);flex-wrap:wrap;align-items:center}
@media(max-width:480px){.czn-adv-row{flex-direction:column}.czn-adv-field-sm{flex:1}.czn-lc-hdr{flex-direction:column}}

/* Logo */
.czn-pub-logo { height: 30px; width: auto; display: block; }

/* ── Color picker ── */
.czn-color-input { width:36px; height:36px; border:1.5px solid var(--czn-g200); border-radius:6px; padding:2px; cursor:pointer; background:none; }
.czn-adv-colors { flex:0 0 auto; min-width:0; }
.czn-check-label { display:flex; align-items:flex-start; gap:8px; font-size:13px; color:var(--czn-g600); cursor:pointer; }
.czn-check-label input[type=checkbox] { margin-top:2px; flex-shrink:0; }
.czn-search-input { max-width:200px; padding:7px 11px; font-size:13px; }
.czn-exp-badge { color:#f59e0b; font-size:12px; }

/* ── QR en tarjeta del dashboard ── */
.czn-card-qr { display:flex; flex-direction:column; align-items:center; gap:4px; flex-shrink:0; }
.czn-card-qr img { border:1px solid var(--czn-g200); }

/* ── Membership UI ── */
.czn-pro-badge{background:#f59e0b;color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:4px;vertical-align:middle;margin-left:6px;text-transform:uppercase;letter-spacing:.5px}
.czn-feat-locked{opacity:.6;pointer-events:none;position:relative}
.czn-upgrade-box{background:#fef9c3;border:1px solid #fcd34d;border-radius:8px;padding:12px 16px;margin-top:16px;font-size:13px;color:#92400e}
.czn-upgrade-link{color:#2563eb;font-weight:600;margin-left:8px;text-decoration:none}
.czn-upgrade-link:hover{text-decoration:underline}
.czn-level-badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.czn-level-free{background:#e2e8f0;color:#475569}
.czn-level-pro{background:#fef3c7;color:#92400e}
/* API key panel */
.czn-api-box{background:#f0f7ff;border:1px solid #bfdbfe;border-radius:8px;padding:14px 16px}
.czn-api-key-row{display:flex;align-items:center;gap:8px;margin:8px 0;flex-wrap:wrap}
.czn-api-key-val{background:#fff;border:1px solid #dde3f0;border-radius:4px;padding:6px 10px;font-size:12px;word-break:break-all;flex:1;min-width:0}
.czn-api-notice{font-size:12px;color:#64748b;margin:0}
.czn-btn-danger{color:#dc2626!important;border-color:#dc2626!important}

/* ── Plan usage panel ── */
.czn-plan-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:8px}
.czn-usage-row{display:flex;justify-content:space-between;font-size:12px;color:#64748b;margin-bottom:4px}
.czn-usage-bar-wrap{background:#e2e8f0;border-radius:99px;height:5px;margin-bottom:10px}
.czn-usage-bar{height:100%;border-radius:99px;transition:width .4s ease}
.czn-plan-exp{font-size:12px;color:#94a3b8}
.czn-locked-feats{font-size:12px;color:#92400e;background:#fef3c7;border-radius:6px;padding:6px 10px;margin-top:6px}
.czn-pro-section{transition:opacity .2s}
/* History table */
.czn-history-tbl{width:100%;font-size:12px}
.czn-history-tbl th{background:#f8fafc;color:#64748b;font-size:11px;text-transform:uppercase;padding:6px 8px}
.czn-history-tbl td{padding:5px 8px;border-bottom:1px solid #f1f5f9}
.czn-history-tbl tr:last-child td{border-bottom:none}

/* ── Plan bar ── */
#czn-plan-bar{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:12px 14px}
.czn-plan-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.czn-level-badge{padding:2px 8px;border-radius:4px;font-size:11px;font-weight:700;text-transform:uppercase}
.czn-level-free{background:#e2e8f0;color:#475569}
.czn-level-pro{background:#fef3c7;color:#92400e}
.czn-plan-exp{font-size:12px;color:#94a3b8}
.czn-plan-use-labels{display:flex;justify-content:space-between;font-size:11px;color:#94a3b8;margin-bottom:3px}
.czn-usage-bar-wrap{background:#e2e8f0;border-radius:99px;height:5px;margin-bottom:8px}
.czn-usage-bar{height:100%;border-radius:99px;transition:width .4s ease}
.czn-plan-usage{margin-bottom:4px}
.czn-locked-feats{font-size:12px;color:#92400e;background:#fef3c7;border-radius:5px;padding:5px 10px;margin-top:6px}
/* Badge 🔒 en tarjeta */
.czn-badge-lock{background:#fee2e2;color:#dc2626}
/* Password field */
.czn-pro-field{} /* shown/hidden by JS */
/* API box */
.czn-api-box{background:#f0f7ff;border:1px solid #bfdbfe;border-radius:8px;padding:12px 14px}
.czn-api-key-row{display:flex;align-items:center;gap:8px;margin:6px 0;flex-wrap:wrap}
.czn-api-key-val{background:#fff;border:1px solid #dde3f0;border-radius:4px;padding:5px 9px;font-size:12px;word-break:break-all;flex:1;min-width:0}
.czn-api-notice{font-size:12px;color:#64748b;margin:0}
.czn-btn-danger{color:#dc2626!important;border-color:#fca5a5!important}

/* ── Privacy checkbox in register form ── */
.czn-privacy-check{margin-top:8px;margin-bottom:4px;align-items:flex-start}
.czn-privacy-check input[type=checkbox]{margin-top:3px;flex-shrink:0}
.czn-privacy-link{color:var(--czn-blue,#2563eb);text-decoration:underline;font-weight:600}
.czn-privacy-link:hover{opacity:.8}

/* ── Forgot password link ── */
.czn-forgot-link{font-size:13px;color:#64748b;text-decoration:none}
.czn-forgot-link:hover{color:#2563eb;text-decoration:underline}