/* ==========================================================================
 * WEEBV Link — committed stylesheet (hand-authored, component-based).
 * The server never builds assets. On the dev machine, `npm run build` can
 * regenerate/extend this from Tailwind; the same component classes are mirrored
 * in resources/css/input.css @layer components so the look survives a rebuild.
 * ========================================================================== */

*,::before,::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:"IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;
  background:#f1f5f9;color:#0f172a;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{line-height:1.25}

/* --- Layout --------------------------------------------------------------- */
.wrap{width:100%;max-width:1040px;margin-inline:auto;padding-inline:20px}
.wrap-sm{width:100%;max-width:460px;margin-inline:auto;padding-inline:20px}
.wrap-md{width:100%;max-width:720px;margin-inline:auto;padding-inline:20px}
.row{display:flex;align-items:center}
.between{display:flex;align-items:center;justify-content:space-between}
.center{display:flex;align-items:center;justify-content:center}
.col{display:flex;flex-direction:column}
.wrapf{flex-wrap:wrap}
.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-6{gap:24px}
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grow{flex:1}
@media(max-width:760px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* --- Spacing -------------------------------------------------------------- */
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}
.mt-6{margin-top:24px}.mt-8{margin-top:32px}
.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}
.mb-6{margin-bottom:24px}.mb-8{margin-bottom:32px}
.py-6{padding-block:24px}.py-10{padding-block:40px}

/* --- Typography ----------------------------------------------------------- */
.h1{font-size:26px;font-weight:800}
.h2{font-size:20px;font-weight:700}
.h3{font-size:16px;font-weight:700}
.small{font-size:13px}.xs{font-size:12px}
.muted{color:#64748b}
.bold{font-weight:700}.semibold{font-weight:600}
.text-center{text-align:center}
.text-brand{color:#4f46e5}.text-danger{color:#dc2626}.text-success{color:#059669}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* --- Navbar --------------------------------------------------------------- */
.nav{background:#fff;border-bottom:1px solid #e2e8f0;position:sticky;top:0;z-index:20}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{font-weight:800;font-size:18px;display:flex;align-items:center;gap:8px}
.brand .dot{width:26px;height:26px;border-radius:8px;background:#4f46e5;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:15px}
.nav-links{display:flex;align-items:center;gap:18px}
.nav-links a{color:#475569;font-size:14px;font-weight:500}
.nav-links a:hover{color:#0f172a}

/* --- Card ----------------------------------------------------------------- */
.card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:24px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.card+.card{margin-top:16px}

/* --- Buttons -------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  font-size:14px;font-weight:600;padding:10px 18px;border-radius:10px;border:1px solid transparent;
  transition:.15s;line-height:1;white-space:nowrap}
.btn-primary{background:#4f46e5;color:#fff}
.btn-primary:hover{background:#4338ca}
.btn-ghost{background:#fff;color:#334155;border-color:#cbd5e1}
.btn-ghost:hover{background:#f8fafc}
.btn-danger{background:#fee2e2;color:#b91c1c;border-color:#fecaca}
.btn-danger:hover{background:#fecaca}
.btn-success{background:#059669;color:#fff}
.btn-success:hover{background:#047857}
.btn-block{display:flex;width:100%}
.btn-sm{padding:7px 12px;font-size:13px;border-radius:8px}
.btn:disabled{opacity:.6;cursor:not-allowed}

/* --- Forms ---------------------------------------------------------------- */
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;color:#475569;margin-bottom:6px;font-weight:600}
input,select,textarea{width:100%;padding:11px 12px;border:1px solid #cbd5e1;border-radius:10px;
  font:inherit;color:#0f172a;background:#fff}
input:focus,select:focus,textarea:focus{outline:none;border-color:#818cf8;box-shadow:0 0 0 3px rgba(99,102,241,.15)}
input[type=checkbox]{width:auto;margin-inline-end:6px}
.field .err{color:#dc2626;font-size:12px;margin-top:6px}
.check{display:flex;align-items:center;font-size:14px;color:#475569}

/* --- Alerts --------------------------------------------------------------- */
.alert{padding:12px 14px;border-radius:10px;font-size:14px;margin-bottom:16px;border:1px solid transparent}
.alert-success{background:#ecfdf5;color:#065f46;border-color:#a7f3d0}
.alert-error{background:#fef2f2;color:#991b1b;border-color:#fecaca}
.alert-info{background:#eff6ff;color:#1e40af;border-color:#bfdbfe}
.alert-warn{background:#fffbeb;color:#92400e;border-color:#fde68a}

/* --- Badges --------------------------------------------------------------- */
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600}
.badge-green{background:#d1fae5;color:#065f46}
.badge-gray{background:#e2e8f0;color:#475569}
.badge-amber{background:#fef3c7;color:#92400e}
.badge-red{background:#fee2e2;color:#991b1b}

/* --- Table ---------------------------------------------------------------- */
.table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th,.table td{text-align:start;padding:12px 10px;border-bottom:1px solid #e2e8f0}
.table th{font-size:12px;color:#64748b;text-transform:uppercase;letter-spacing:.03em}
.table tbody tr:hover{background:#f8fafc}

/* --- Plans ---------------------------------------------------------------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:820px){.plans{grid-template-columns:1fr}}
.plan{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:24px;display:flex;flex-direction:column}
.plan.current{border-color:#4f46e5;box-shadow:0 0 0 1px #4f46e5}
.plan .price{font-size:30px;font-weight:800;margin:10px 0}
.plan .price small{font-size:13px;font-weight:500;color:#64748b}
.plan ul{list-style:none;margin:14px 0;flex:1}
.plan li{padding:6px 0;font-size:14px;color:#334155;display:flex;gap:8px}
.plan li::before{content:"✓";color:#059669;font-weight:700}

/* --- Toggle (billing interval) ------------------------------------------- */
.seg{display:inline-flex;background:#e2e8f0;border-radius:999px;padding:4px}
.seg a{padding:6px 16px;border-radius:999px;font-size:13px;font-weight:600;color:#475569}
.seg a.active{background:#fff;color:#0f172a;box-shadow:0 1px 2px rgba(0,0,0,.08)}

/* --- Misc ----------------------------------------------------------------- */
.hidden{display:none}
.w-full{width:100%}
.divider{height:1px;background:#e2e8f0;margin:20px 0}
.stat{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:18px}
.stat .n{font-size:26px;font-weight:800}
.stat .l{font-size:13px;color:#64748b}
.footer{color:#94a3b8;font-size:13px;text-align:center;padding:30px 0}

/* --- Dashboard shell ------------------------------------------------------ */
body.dash{background:#f1f5f9}
.dash-shell{display:flex;min-height:100vh}
.dash-side{width:250px;background:#fff;border-inline-end:1px solid #e2e8f0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.side-nav{display:flex;flex-direction:column;padding:8px}
.side-nav a{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:10px;color:#475569;font-size:14px;font-weight:500}
.side-nav a:hover{background:#f8fafc;color:#0f172a}
.side-nav a.active{background:#eef2ff;color:#4338ca;font-weight:700}
.dash-main{flex:1;min-width:0;display:flex;flex-direction:column}
.dash-top{display:flex;align-items:center;gap:12px;height:56px;padding:0 20px;background:#fff;border-bottom:1px solid #e2e8f0;position:sticky;top:0;z-index:10}
.dash-content{padding:26px 24px;max-width:1100px;width:100%;margin-inline:auto}
.burger{display:none}
@media(max-width:860px){
  .dash-side{position:fixed;inset-inline-start:0;top:0;z-index:40;transform:translateX(-110%);transition:.2s}
  html[dir=rtl] .dash-side{transform:translateX(110%)}
  .dash-side.is-open{transform:translateX(0)}
  .burger{display:inline-flex}
}

/* --- Editor --------------------------------------------------------------- */
.editor-grid{display:grid;grid-template-columns:1fr 380px;gap:24px;align-items:start}
@media(max-width:1000px){.editor-grid{grid-template-columns:1fr}}
.link-item{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:12px 14px;margin-bottom:10px}
.link-item .handle{cursor:grab;color:#94a3b8;font-size:18px;user-select:none}
.link-item .li-body{flex:1;min-width:0}
.link-item .li-title{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.link-item .li-url{font-size:12px;color:#94a3b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.link-item.inactive{opacity:.55}
.type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.type-grid button{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:12px 6px;cursor:pointer;font-size:13px;display:flex;flex-direction:column;align-items:center;gap:6px}
.type-grid button:hover{border-color:#818cf8;background:#f8fafc}

/* preview phone */
.preview{position:sticky;top:80px}
.phone{background:#0f172a;border-radius:28px;padding:10px;box-shadow:0 12px 40px rgba(0,0,0,.18)}
.phone-screen{background:#fff;border-radius:20px;overflow:hidden;height:600px}
.phone-screen iframe{width:100%;height:100%;border:0}

/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(15,23,42,.5);display:flex;align-items:center;justify-content:center;z-index:60;padding:16px}
.modal{background:#fff;border-radius:16px;max-width:520px;width:100%;max-height:90vh;overflow:auto;padding:24px}

/* theme swatch */
.theme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:700px){.theme-grid{grid-template-columns:repeat(2,1fr)}.type-grid{grid-template-columns:repeat(2,1fr)}}
.swatch{border:2px solid #e2e8f0;border-radius:14px;padding:0;overflow:hidden;cursor:pointer;background:none;text-align:start}
.swatch.selected{border-color:#4f46e5}
.swatch .preview-box{height:90px}
.swatch .label{padding:8px 10px;font-size:13px;font-weight:600;display:flex;justify-content:space-between;align-items:center}
.copybar{display:flex;gap:8px;align-items:center;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:8px 12px}
.copybar input{border:0;background:none;padding:0;font-family:ui-monospace,monospace;font-size:13px}
.sortable-ghost{opacity:.4}