.mylinks-body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#f5f5f7}
.mylinks-card{max-width:920px;margin:24px auto;background:#fff;border-radius:18px;box-shadow:0 6px 26px rgba(0,0,0,.08);padding:18px}
.mylinks-row{display:flex;gap:12px;flex-wrap:wrap}
.mylinks-col{flex:1;min-width:280px}
.mylinks-h1{font-size:28px;margin:0 0 12px}
.mylinks-muted{color:#666;font-size:14px}
.mylinks-input,.mylinks-textarea{width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:10px;font-size:14px}
.mylinks-textarea{min-height:90px;resize:vertical}
.mylinks-btn{border:0;border-radius:10px;padding:10px 14px;font-weight:600;cursor:pointer}
.mylinks-btn-primary{background:#6d28d9;color:#fff}
.mylinks-btn-secondary{background:#111827;color:#fff}
.mylinks-btn-ghost{background:#eef2ff;color:#3730a3}
.mylinks-btn-save{background:#16a34a;color:#fff}
.mylinks-btn-save:hover{filter:brightness(0.95)}
.mylinks-btn-danger{background:#dc2626;color:#fff}
.mylinks-icon{width:16px;height:16px;display:inline-block;vertical-align:-3px;fill:currentColor;opacity:.95}
.mylinks-badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700}
.mylinks-badge-premium{background:linear-gradient(90deg,#f59e0b,#ef4444);color:#fff}
.mylinks-linkrow{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;border:1px solid #eee;border-radius:12px;padding:10px;margin:8px 0}
.mylinks-preview{border-radius:18px;padding:18px;color:#fff}
.mylinks-preview-link{display:block;background:var(--ml-btn-bg, rgba(255,255,255,.14));padding:12px 14px;border-radius:12px;color:var(--ml-btn-text, #fff);text-decoration:none;margin:10px 0}
.mylinks-topbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.mylinks-prefix{display:flex;border:1px solid #ddd;border-radius:10px;overflow:hidden}
.mylinks-prefix span{background:#f3f4f6;color:#6b7280;padding:10px 12px;border-right:1px solid #ddd;white-space:nowrap;font-size:13px}
.mylinks-prefix input{border:0;outline:none;padding:10px 12px;min-width:140px;font-size:14px}


/* Enhanced preview look */
.mylinks-public-wrap{min-height:100vh;padding:24px;}
.mylinks-embed{min-height:auto;padding:0;}
.mylinks-embed .mylinks-public-card{max-width:100%;}

.mylinks-public-card{max-width:540px;margin:0 auto;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-radius:24px;padding:22px;box-shadow:0 18px 50px rgba(0,0,0,.18);;color:var(--ml-text-color,#111827)}
.mylinks-avatar{width:92px;height:92px;border-radius:50%;overflow:hidden;border:4px solid #fff;box-shadow:0 10px 25px rgba(0,0,0,.18);margin:0 auto 14px;}
.mylinks-avatar img{width:100%;height:100%;object-fit:cover;}
.mylinks-username{font-size:28px;font-weight:800;text-align:center;margin:0;}
.mylinks-title{font-size:18px;font-weight:700;text-align:center;margin:6px 0 0;color:#111827;}
.mylinks-bio{text-align:center;color:#4b5563;margin:10px 0 18px;white-space:pre-wrap}
.mylinks-public-link{display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;color:var(--ml-btn-text, white);font-weight:700;padding:14px 14px;border-radius:14px;background:var(--ml-btn-bg, linear-gradient(90deg,#7c3aed,#ec4899));box-shadow:0 10px 22px rgba(0,0,0,.12);transform:translateZ(0);transition:transform .15s ease, box-shadow .15s ease;}
.mylinks-public-link:hover{transform:scale(1.02);box-shadow:0 14px 28px rgba(0,0,0,.18);}
.mylinks-links{display:flex;flex-direction:column;gap:12px}
.mylinks-public-error{max-width:520px;margin:24px auto;background:#fff;border-radius:18px;padding:18px;box-shadow:0 10px 30px rgba(0,0,0,.12)}

/* Theme backgrounds */
.mylinks-theme-gradient-purple{background:linear-gradient(135deg,#4f46e5,#a855f7,#ec4899)}
.mylinks-theme-gradient-blue{background:linear-gradient(135deg,#2563eb,#06b6d4,#14b8a6)}
.mylinks-theme-gradient-green{background:linear-gradient(135deg,#16a34a,#10b981,#0ea5e9)}
.mylinks-theme-dark{background:#0b1220}
.mylinks-theme-light{background:linear-gradient(180deg,#f8fafc,#eef2ff)}
.mylinks-theme-image{background:#0b1220}

/* Make public card readable on light/dark */
.mylinks-theme-dark .mylinks-public-card{background:rgba(17,24,39,.82);color:#fff}
.mylinks-theme-dark .mylinks-title{color:#fff}
.mylinks-theme-dark .mylinks-bio{color:#d1d5db}
.mylinks-theme-light .mylinks-public-card{background:rgba(255,255,255,.94)}

/* Avatar dropzone */
.mylinks-field{margin-bottom:12px}
.mylinks-label{font-size:14px;color:#666;margin-bottom:6px}
.mylinks-avatar-drop{width:132px;height:132px;border-radius:999px;margin:0 0 10px;overflow:hidden;border:3px dashed #d1d5db;display:flex;align-items:center;justify-content:center;cursor:pointer;background:linear-gradient(135deg,#f8fafc,#eef2ff);transition:all .15s ease}
.mylinks-avatar-drop.is-drag{border-color:#7c3aed;transform:scale(1.03);background:rgba(124,58,237,.08)}
.mylinks-avatar-drop img{width:100%;height:100%;object-fit:cover}
.mylinks-avatar-placeholder{font-size:12px;color:#6b7280;text-align:center;padding:10px}
.mylinks-avatar-actions{display:flex;gap:8px;flex-wrap:wrap}

/* Theme picker */
.mylinks-theme-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mylinks-theme-btn{border:2px solid transparent;border-radius:14px;height:64px;cursor:pointer;position:relative;color:var(--ml-btn-text, #fff);font-weight:800}
.mylinks-theme-btn.is-active{border-color:#111827;box-shadow:0 10px 22px rgba(0,0,0,.18)}
.mylinks-theme-btn.is-locked{opacity:.65;filter:saturate(.7)}
.mylinks-theme-name{position:absolute;left:10px;bottom:10px;font-size:12px;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.mylinks-theme-lock{position:absolute;right:10px;top:10px;font-size:14px;background:rgba(0,0,0,.25);padding:4px 8px;border-radius:999px}

/* Preview tweaks for light theme */
.mylinks-theme-light.mylinks-preview{color:#111827}
.mylinks-theme-light .mylinks-preview-link{background:rgba(17,24,39,.08);color:#111827}
.mylinks-preview-avatar{width:86px;height:86px;border-radius:999px;overflow:hidden;border:4px solid rgba(255,255,255,.75);box-shadow:0 10px 25px rgba(0,0,0,.18);margin:0 auto 12px}
.mylinks-preview-avatar img{width:100%;height:100%;object-fit:cover}

.mylinks-theme-gradient-orange{background:linear-gradient(135deg,#f97316,#fb923c,#f59e0b)}
.mylinks-theme-gradient-red{background:linear-gradient(135deg,#dc2626,#ef4444,#fb7185)}
.mylinks-theme-gradient-gold{background:linear-gradient(135deg,#b45309,#f59e0b,#fcd34d)}

.mylinks-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:16px;z-index:999999}
.mylinks-modal{width:min(1000px,100%);height:min(720px,90vh);background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.45);display:flex;flex-direction:column}
.mylinks-modal-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid rgba(0,0,0,.08)}
.mylinks-modal-title{font-weight:800}
.mylinks-modal-iframe{border:0;flex:1;width:100%}

/* Fullscreen preview (editor "Aperçu public") */
.mylinks-modal-overlay.mylinks-fullscreen{padding:0}
.mylinks-modal.mylinks-modal-full{width:100vw;max-width:none;height:100vh;max-height:none;border-radius:0;overflow:auto}
.mylinks-modal.mylinks-modal-full .mylinks-modal-head{border-radius:0}

.mylinks-row-compact{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px}
.mylinks-color-field{display:flex;flex-direction:column;gap:6px;min-width:160px}
.mylinks-color-field input[type=color]{width:56px;height:36px;padding:0;border:none;background:transparent;cursor:pointer}

/* Landing plans */
.mylinks-auth-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.mylinks-plan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:12px}
@media (max-width:820px){.mylinks-plan-grid{grid-template-columns:1fr}}
.mylinks-plan{border:2px solid rgba(17,24,39,.12);border-radius:18px;padding:16px;background:rgba(255,255,255,.75);cursor:pointer;transition:all .15s ease}
.mylinks-plan:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(0,0,0,.10)}
.mylinks-plan.is-active{border-color:#111827;box-shadow:0 18px 40px rgba(0,0,0,.14)}
.mylinks-plan-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.mylinks-plan-title{font-size:18px;font-weight:900}
.mylinks-plan-price{font-size:22px;font-weight:900}
.mylinks-plan-sub{color:#16a34a;font-weight:700;margin-top:4px}
.mylinks-plan-list{margin:12px 0 0;padding-left:18px;color:#374151}
.mylinks-plan-list li{margin:6px 0}
.mylinks-billing-toggle{display:flex;gap:8px;margin:8px 0 2px}
.mylinks-pill{border:1px solid rgba(17,24,39,.15);background:rgba(255,255,255,.7);padding:6px 10px;border-radius:999px;cursor:pointer;font-weight:700}
.mylinks-pill.is-active{background:#111827;color:#fff;border-color:#111827}
.mylinks-signup{margin-top:18px;padding-top:14px;border-top:1px solid rgba(0,0,0,.08)}


.mylinks-btn-premium{background:linear-gradient(90deg,#f59e0b,#ef4444);color:#fff;border:none}
.mylinks-btn-premium:hover{filter:brightness(1.02)}

/* Toast */
.mylinks-toast{position:fixed;right:18px;top:18px;z-index:99999;padding:12px 14px;border-radius:12px;box-shadow:0 10px 24px rgba(0,0,0,.18);font-weight:800;opacity:0;transform:translateY(-10px);transition:opacity .18s ease, transform .18s ease}
.mylinks-toast.show{opacity:1;transform:translateY(0)}
.mylinks-toast-success{background:#16a34a;color:#fff}
.mylinks-toast-error{background:#dc2626;color:#fff}


.mylinks-ads{max-width:920px;margin:16px auto 48px auto;padding:0 16px}
.mylinks-ads ins{border-radius:14px;overflow:hidden}


/* Ads placements */
.mylinks-ads-slot{max-width:720px;margin:14px auto; padding:0 8px}
.mylinks-ads-top{margin-top:0;margin-bottom:18px}
.mylinks-ads-bottom{margin-top:18px;margin-bottom:0}
.mylinks-ads-mid{margin:8px auto 6px}
.mylinks-ads-slot ins{border-radius:14px;overflow:hidden}

/* QR modal controls */
.mylinks-qr-controls{display:grid;grid-template-columns:auto auto;gap:10px 12px;align-items:center;justify-content:center;max-width:640px}
.mylinks-qr-controls select.mylinks-input{width:auto}
.mylinks-qr-wrap{position:relative;width:320px;height:320px;border-radius:14px;border:1px solid #e5e7eb;background:#fff;overflow:hidden;display:flex;align-items:center;justify-content:center}
.mylinks-qr-wrap.is-rounded{border-radius:28px}
.mylinks-qr-wrap > img.mylinks-qr-img{width:320px;height:320px;display:block}
.mylinks-qr-logo-wrap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,.95);border-radius:18px;padding:8px;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.mylinks-qr-logo-wrap img{width:48px;height:48px;display:block;border-radius:10px}

/* Analytics */
.mylinks-analytics-head{display:flex;gap:10px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;margin-bottom:10px}
.mylinks-analytics-range{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mylinks-select{padding:10px 12px;border:1px solid rgba(17,24,39,.16);border-radius:12px;background:#fff;font-weight:700}
.mylinks-analytics-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:980px){.mylinks-analytics-grid{grid-template-columns:1fr}}
.mylinks-analytics-box{border:1px solid rgba(17,24,39,.10);border-radius:16px;padding:14px;background:rgba(255,255,255,.75)}
.mylinks-h3{margin:0 0 10px;font-size:15px;font-weight:900}
.mylinks-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:10px 0 10px}
@media (max-width:980px){.mylinks-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mylinks-stat{border:1px solid rgba(17,24,39,.10);border-radius:16px;padding:12px;background:#fff}
.mylinks-stat-label{color:#6b7280;font-weight:800;font-size:12px}
.mylinks-stat-value{font-size:26px;font-weight:1000;color:#111827;margin-top:2px}
.mylinks-chart-wrap{border:1px solid rgba(17,24,39,.10);border-radius:16px;padding:12px;background:#fff}
.mylinks-chart-legend{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.mylinks-chart-legend .dot{font-size:18px;line-height:1}
.mylinks-chart-legend .dot.views{color:#2563eb}
.mylinks-chart-legend .dot.clicks{color:#16a34a}
.mylinks-table{display:flex;flex-direction:column;gap:6px}
.mylinks-table-row{display:grid;grid-template-columns:1fr 90px;gap:10px;align-items:center;padding:10px 12px;border:1px solid rgba(17,24,39,.08);border-radius:12px;background:#fff}
.mylinks-table-row.head{background:rgba(17,24,39,.04);font-weight:900}
.mylinks-table-row .num{text-align:right;font-weight:900}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}



/* Settings dropdown */
.mylinks-settings{ position:relative; }
.mylinks-menu{
  position:absolute;
  right:0;
  top:38px;
  min-width:240px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.12);
  padding:6px;
  z-index:9999;
}
.mylinks-menu-item{
  width:100%;
  text-align:left;
  border:0;
  background:transparent;
  padding:10px 10px;
  border-radius:10px;
  font-weight:600;
  cursor:pointer;
}
.mylinks-menu-item:hover{ background:#f3f4f6; }
.mylinks-menu-item.danger{ color:#dc2626; }
.mylinks-menu-item.danger:hover{ background:#fef2f2; }
.mylinks-menu-sep{ height:1px; background:#eef2f7; margin:6px 6px; }