:root{
  --green:#2554c7;
  --green-dark:#173a8f;
  --orange:#c9a227;
  --orange-dark:#a8841a;
  --maroon:#122a5e;
  --text:#333;
  --muted:#777;
  --bg:#f7f7f7;
  --card:#fff;
  --radius:8px;
}
*{box-sizing:border-box;}
body{margin:0;font-family:'Segoe UI',Arial,sans-serif;background:var(--bg);color:var(--text);}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
.container{max-width:1200px;margin:0 auto;padding:0 20px;}

/* ---------- Top bar ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff;flex-wrap:wrap;gap:12px;}
.brand{display:flex;align-items:center;gap:10px;}
.brand img{height:56px;}
.brand .name-ta{font-weight:700;color:var(--green-dark);font-size:20px;line-height:1.1;}
.brand .name-sub{color:var(--orange-dark);font-size:13px;font-weight:600;}
.topbar-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.topbar-actions input{padding:10px 14px;border:none;border-radius:4px;background:#eee;min-width:170px;}
.btn{border:none;border-radius:4px;padding:10px 18px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;}
.btn-green{background:var(--green);color:#fff;}
.btn-green:hover{background:var(--green-dark);}
.btn-orange{background:var(--orange);color:#fff;}
.btn-orange:hover{background:var(--orange-dark);}
.btn-outline{background:transparent;border:1px solid var(--green);color:var(--green);}
.btn-block{width:100%;justify-content:center;}
.btn-sm{padding:6px 12px;font-size:13px;}

/* ---------- Nav ---------- */
.navbar{background:var(--green);}
.navbar ul{list-style:none;display:flex;margin:0;padding:0;flex-wrap:wrap;}
.navbar li{position:relative;}
.navbar a{display:flex;align-items:center;gap:6px;color:#fff;padding:16px 18px;font-weight:600;font-size:14px;}
.navbar a:hover{background:rgba(0,0,0,.12);}
.navbar .right{margin-left:auto;display:flex;}

/* ---------- Hero ---------- */
.hero{position:relative;background:linear-gradient(120deg,#0c1f4d,#2554c7 45%,#0c1f4d);min-height:420px;display:flex;align-items:center;overflow:hidden;}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9;}
.hero-tagline{position:relative;z-index:2;color:#fff;font-family:Georgia,serif;font-style:italic;font-size:38px;line-height:1.3;max-width:520px;padding:20px;text-shadow:0 2px 8px rgba(0,0,0,.4);}
.hero-badges{position:absolute;bottom:20px;left:20px;display:flex;gap:14px;z-index:3;flex-wrap:wrap;}
.hero-badge{background:#fff;padding:12px 18px;border-radius:6px;display:flex;align-items:center;gap:10px;font-weight:700;color:#333;font-size:14px;box-shadow:0 4px 10px rgba(0,0,0,.15);}
.hero-badge .icon{color:var(--green);font-size:20px;}

/* ---------- Register widget (over hero) ---------- */
.register-card{position:relative;z-index:3;background:#fff;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.25);width:340px;margin-left:auto;overflow:hidden;}
.register-card .head{background:var(--orange);color:#fff;padding:14px 18px;font-weight:700;display:flex;align-items:center;gap:10px;}
.register-card .body{padding:18px;max-height:70vh;overflow-y:auto;}
.register-card .field{margin-bottom:12px;}
.register-card input,.register-card select{font-size:13.5px;}
.register-card .row2{gap:8px;}
.register-card label.check{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--muted);margin:10px 0;text-transform:none;font-weight:400;}
.register-card .terms a{color:var(--green);font-weight:600;}

/* ---------- Sections ---------- */
.section{padding:60px 0;}
.section-title{text-align:center;font-size:32px;color:#555;margin-bottom:6px;}
.section-title.accent{color:var(--orange-dark);}
.section-sub{text-align:center;color:var(--muted);max-width:700px;margin:0 auto 20px;}
.divider{display:flex;justify-content:center;align-items:center;gap:10px;margin:20px 0 40px;color:var(--green);}
.divider .line{flex:1;max-width:260px;height:1px;background:#ddd;}

.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;text-align:center;}
.services-grid .icon{font-size:44px;margin-bottom:12px;}
.services-grid h3{margin:8px 0;color:#444;}
.services-grid p{color:var(--muted);font-size:14px;}
.services-grid a{color:var(--orange);font-weight:600;font-size:13px;}

.profiles-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;}
.profile-card{background:#fff;border:1px solid #eee;border-radius:8px;overflow:hidden;text-align:center;padding-bottom:16px;transition:.2s;}
.profile-card:hover{box-shadow:0 8px 20px rgba(0,0,0,.1);transform:translateY(-3px);}
.profile-card .photo{position:relative;background:#eee;height:180px;display:flex;align-items:center;justify-content:center;}
.profile-card .photo img{width:100%;height:100%;object-fit:cover;}
.profile-card .photo .lock{font-size:40px;color:var(--orange);}
.profile-card .protected{color:var(--orange);font-weight:700;margin:10px 0 4px;font-size:14px;}
.profile-card h4{margin:6px 0 2px;font-size:16px;}
.profile-card .meta{color:var(--muted);font-size:13px;padding:0 10px;min-height:54px;}
.profile-card .view-btn{margin-top:10px;width:40px;height:40px;border-radius:6px;background:var(--orange);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;}

/* ---------- Footer ---------- */
footer{background:#f2f2f2;padding:50px 0 20px;margin-top:40px;}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;}
.footer-grid h4{color:var(--green);margin-bottom:14px;}
.footer-grid a{display:block;color:#555;margin-bottom:10px;font-size:14px;}
.footer-bottom{text-align:center;padding-top:20px;margin-top:20px;border-top:1px solid #ddd;color:var(--muted);font-size:13px;}
.social{display:flex;gap:10px;margin-top:10px;}
.social span{width:32px;height:32px;border-radius:4px;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;}

/* ==================================================================
   FORM SYSTEM — inputs, selects, textareas, icons, validation states
   ================================================================== */

/* Base field wrapper used everywhere (auth pages, dashboard, register widget) */
.field{margin-bottom:18px;}
.field label,
.auth-wrap label{
  display:flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:700;letter-spacing:.2px;
  margin-bottom:6px;color:#4a4a4a;text-transform:uppercase;
}
.field label .req,
.auth-wrap label .req{color:var(--orange);font-weight:800;}
.field .hint{font-size:11.5px;color:#999;margin-top:4px;font-weight:400;text-transform:none;}

/* Core control styling — consistent everywhere (defined BEFORE icon overrides
   so padding-left/right for icons always wins the cascade below) */
input[type="text"],input[type="email"],input[type="password"],
input[type="tel"],input[type="number"],input[type="date"],
input:not([type]),select,textarea{
  width:100%;
  padding:12px 14px;
  border:1.5px solid #e2e2e2;
  border-radius:7px;
  font-size:14px;
  font-family:inherit;
  color:var(--text);
  background:#fbfbfb;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
  appearance:none;
  -webkit-appearance:none;
  box-sizing:border-box;
}
textarea{resize:vertical;min-height:80px;line-height:1.5;}
input::placeholder,textarea::placeholder{color:#a8a8a8;font-weight:400;}

/* Custom select chevron */
select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' stroke='%232554c7' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:34px;
  cursor:pointer;
}

/* Icon + input pairing — declared AFTER the base control rules above so the
   left/right padding they set always takes effect regardless of specificity ties */
.input-icon{position:relative;display:flex;align-items:center;width:100%;}
.input-icon .ic{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  font-size:15px;color:var(--green);opacity:.85;pointer-events:none;line-height:1;z-index:1;
}
.input-icon input,
.input-icon select{padding-left:38px !important;}
.input-icon.has-suffix input{padding-right:40px !important;}
.input-icon .suffix-btn{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;color:#999;font-size:15px;padding:6px;
  display:flex;align-items:center;justify-content:center;z-index:1;
}
.input-icon .suffix-btn:hover{color:var(--green);}

/* Focus state — glow + border color, consistent across all controls */
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--green);
  background:#fff;
  box-shadow:0 0 0 4px rgba(90,146,22,.12);
}
.input-icon:focus-within .ic{opacity:1;color:var(--green);}

/* Hover (non-focus) */
input:hover,select:hover,textarea:hover{border-color:#c9c9c9;}

/* Disabled */
input:disabled,select:disabled{background:#f1f1f1;color:#999;cursor:not-allowed;}

/* Validation states */
.field.invalid input,.field.invalid select,.field.invalid textarea,
input.invalid,select.invalid{
  border-color:#e05353;background:#fff6f6;
}
.field.invalid input:focus,.field.invalid select:focus{box-shadow:0 0 0 4px rgba(224,83,83,.12);}
.field .error-text{color:#c0392b;font-size:12px;margin-top:5px;display:none;font-weight:600;}
.field.invalid .error-text{display:block;}
.field.valid input,.field.valid select{border-color:var(--green);}
.field.valid .input-icon .ic{color:var(--green);opacity:1;}

/* Checkbox styling */
label.check{cursor:pointer;}
label.check input[type="checkbox"]{
  width:16px;height:16px;flex-shrink:0;margin-top:1px;accent-color:var(--green);cursor:pointer;
}

/* Row groups */
.row2{display:flex;gap:14px;}
.row2>*{flex:1;min-width:0;}
.row3{display:flex;gap:14px;}
.row3>*{flex:1;min-width:0;}

/* Section headers inside long forms (registration, profile edit) */
.form-section{margin-bottom:26px;}
.form-section-title{
  display:flex;align-items:center;gap:8px;
  font-size:14px;font-weight:800;color:var(--green-dark);
  text-transform:uppercase;letter-spacing:.4px;
  padding-bottom:8px;margin-bottom:16px;border-bottom:2px solid #e8effc;
}
.form-section-title .num{
  width:22px;height:22px;border-radius:50%;background:var(--green);color:#fff;
  font-size:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}

/* ---------- Auth pages ---------- */
.auth-wrap{max-width:460px;margin:60px auto;background:#fff;padding:32px;border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.08);}
.auth-wrap h2{margin-top:0;color:var(--green-dark);}
.msg{padding:11px 14px;border-radius:6px;margin-bottom:16px;font-size:13.5px;display:none;align-items:center;gap:8px;font-weight:600;}
.msg.error{background:#fdeaea;color:#b02a2a;display:flex;}
.msg.success{background:#e9f7ee;color:#1c7c3c;display:flex;}
.switch-link{text-align:center;margin-top:16px;font-size:14px;color:var(--muted);}
.switch-link a{color:var(--green);font-weight:700;}

/* ---------- Dashboard ---------- */
.dash-layout{display:grid;grid-template-columns:240px 1fr;gap:24px;max-width:1200px;margin:30px auto;padding:0 20px;align-items:start;}
.sidebar{background:#fff;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.05);padding:16px;position:sticky;top:20px;}
.sidebar .user-mini{text-align:center;padding-bottom:14px;border-bottom:1px solid #eee;margin-bottom:14px;}
.sidebar .avatar{width:70px;height:70px;border-radius:50%;background:#ddd;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-size:28px;color:#999;overflow:hidden;}
.sidebar nav a{display:block;padding:10px 12px;border-radius:6px;color:#555;font-weight:600;font-size:14px;margin-bottom:4px;}
.sidebar nav a.active,.sidebar nav a:hover{background:#e8effc;color:var(--green-dark);}
.badge-plan{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;background:#eee;color:#666;margin-top:6px;}
.badge-plan.premium{background:linear-gradient(90deg,var(--orange),#e6c65c);color:#fff;}
.card{background:#fff;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.05);padding:20px;margin-bottom:20px;}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px;}
.stat-box{background:#fff;border-radius:8px;padding:18px;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,.05);}
.stat-box .num{font-size:26px;font-weight:700;color:var(--green-dark);}
.stat-box .label{color:var(--muted);font-size:13px;margin-top:4px;}

table{width:100%;border-collapse:collapse;font-size:14px;}
table th,table td{text-align:left;padding:10px 8px;border-bottom:1px solid #eee;}
table th{color:#777;font-size:12px;text-transform:uppercase;}
.tag{padding:3px 10px;border-radius:20px;font-size:12px;font-weight:700;}
.tag.pending{background:#fff3cd;color:#8a6d00;}
.tag.approved{background:#e9f7ee;color:#1c7c3c;}
.tag.blocked{background:#fdeaea;color:#b02a2a;}
.tag.success{background:#e9f7ee;color:#1c7c3c;}
.tag.failed{background:#fdeaea;color:#b02a2a;}

/* plans */
.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.plan-card{background:#fff;border-radius:10px;padding:26px;text-align:center;box-shadow:0 4px 16px rgba(0,0,0,.06);border:2px solid transparent;}
.plan-card.featured{border-color:var(--orange);}
.plan-card .price{font-size:32px;font-weight:800;color:var(--green-dark);margin:10px 0;}
.plan-card .price small{font-size:14px;color:var(--muted);font-weight:400;}
.plan-card ul{list-style:none;padding:0;margin:16px 0;text-align:left;color:#555;font-size:14px;}
.plan-card ul li{padding:6px 0;border-bottom:1px dashed #eee;}

.admin-badge{background:var(--maroon);color:#fff;padding:4px 10px;border-radius:4px;font-size:12px;font-weight:700;}

/* ==================================================================
   ADMIN PANEL — dedicated dark sidebar shell
   ================================================================== */
.admin-shell{display:flex;min-height:100vh;background:#f3f4f6;}

.admin-sidebar{
  width:270px;flex-shrink:0;
  background:linear-gradient(180deg,#1a2332,#10151f);
  color:#cbd5e1;
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.admin-sidebar .brand-mini{
  display:flex;align-items:center;gap:12px;
  padding:22px 20px;border-bottom:1px solid rgba(255,255,255,.08);
}
.admin-sidebar .brand-mini .logo{
  width:42px;height:42px;border-radius:10px;background:linear-gradient(135deg,var(--orange),#e6c65c);
  display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;
}
.admin-sidebar .brand-mini .txt-a{color:#fff;font-weight:800;font-size:15px;line-height:1.2;}
.admin-sidebar .brand-mini .txt-b{color:#8b98ab;font-size:11px;letter-spacing:.5px;text-transform:uppercase;font-weight:700;}

.admin-profile-card{
  margin:18px 16px;padding:16px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;gap:12px;
}
.admin-profile-card .av{
  width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--green),var(--green-dark));
  display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;font-weight:800;flex-shrink:0;
}
.admin-profile-card .info .name{color:#fff;font-weight:700;font-size:13.5px;}
.admin-profile-card .info .role{color:#8b98ab;font-size:11.5px;}

.admin-sidebar nav{padding:6px 12px 20px;flex:1;}
.admin-sidebar .nav-label{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;font-weight:800;
  color:#5b6779;margin:18px 10px 8px;
}
.admin-sidebar nav a{
  display:flex;align-items:center;gap:12px;
  padding:11px 12px;border-radius:9px;margin-bottom:3px;
  color:#b6c0cf;font-weight:600;font-size:13.8px;
  border-left:3px solid transparent;position:relative;
  transition:background .15s, color .15s;
}
.admin-sidebar nav a .ic{font-size:16px;width:20px;text-align:center;flex-shrink:0;}
.admin-sidebar nav a:hover{background:rgba(255,255,255,.06);color:#fff;}
.admin-sidebar nav a.active{
  background:rgba(245,135,31,.14);color:#fff;border-left-color:var(--orange);
}
.admin-sidebar nav a .count{
  margin-left:auto;background:var(--orange);color:#fff;font-size:10.5px;font-weight:800;
  padding:2px 7px;border-radius:20px;min-width:18px;text-align:center;
}
.admin-sidebar .sidebar-footer{padding:16px;border-top:1px solid rgba(255,255,255,.08);}
.admin-sidebar .sidebar-footer .btn{width:100%;justify-content:center;}

.admin-content{flex:1;min-width:0;}
.admin-topbar{
  background:#fff;padding:16px 28px;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid #eee;position:sticky;top:0;z-index:5;
}
.admin-topbar h1{font-size:19px;margin:0;color:#222;}
.admin-topbar .sub{color:#888;font-size:12.5px;margin-top:2px;}
.admin-main{padding:26px 28px;max-width:1200px;}

@media(max-width:900px){
  .admin-sidebar{position:fixed;left:0;top:0;z-index:40;transform:translateX(-100%);transition:transform .2s;}
  .admin-sidebar.open{transform:translateX(0);}
  .admin-main{padding:18px;}
}

@media(max-width:900px){
  .services-grid,.profiles-grid,.footer-grid,.stat-row,.plans-grid{grid-template-columns:repeat(2,1fr);}
  .dash-layout{grid-template-columns:1fr;}
  .register-card{margin:20px auto;}
  .hero-tagline{font-size:26px;}
}