@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

.kima-portal {
  --kima-blue:       #2B7FD4;
  --kima-blue-dark:  #1a5fa0;
  --kima-blue-light: #e8f2fc;
  --kima-blue-mid:   #4a94e0;
  --kima-text:       #1a1e2e;
  --kima-muted:      #6b7280;
  --kima-border:     #e2e8f0;
  --kima-bg:         #f5f8fc;
  --kima-white:      #ffffff;
  --kima-green:      #10b981;
  --kima-green-bg:   #ecfdf5;
  --kima-orange:     #f59e0b;
  --kima-orange-bg:  #fffbeb;
  --kima-red:        #ef4444;
  --kima-red-bg:     #fef2f2;
  font-family: 'DM Sans', sans-serif;
  color: var(--kima-text);
}

.kima-portal__loading {
  display: flex; flex-direction: column; align-items: center;
  padding: 60px 20px; color: var(--kima-muted);
}
.kima-spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--kima-border); border-top-color: var(--kima-blue);
  border-radius: 50%; animation: kima-spin .8s linear infinite; margin-bottom: 12px;
}
@keyframes kima-spin { to { transform: rotate(360deg); } }

.kima-portal__error, .kima-portal--login {
  background: var(--kima-white); border: 1px solid var(--kima-border);
  border-radius: 12px; padding: 40px; text-align: center; color: var(--kima-muted);
}
.kima-portal__error a, .kima-portal--login a { color: var(--kima-blue); }

.kp { max-width: 1100px; margin: 0 auto; }

.kp-greeting { display: flex; align-items: center; gap: 14px; margin-bottom: 32px; }
.kp-avatar {
  width: 52px; height: 52px; background: var(--kima-blue); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 18px; font-weight: 600; flex-shrink: 0;
}
.kp-greeting__name { font-size: 22px; font-weight: 600; margin: 0 0 2px; }
.kp-greeting__sub  { font-size: 13px; color: var(--kima-muted); margin: 0; }

.kp-top-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-bottom: 28px; }

.kp-card {
  background: var(--kima-white); border: 1px solid var(--kima-border);
  border-radius: 14px; padding: 24px; transition: box-shadow .2s;
  animation: kp-up .5s ease both;
}
.kp-card:hover { box-shadow: 0 4px 24px rgba(43,127,212,.08); }
@keyframes kp-up { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }

.kp-card__label {
  font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--kima-muted); margin-bottom: 14px; display: flex; align-items: center; gap: 6px;
}
.kp-dot { width:6px; height:6px; border-radius:50%; background:var(--kima-blue); display:inline-block; }
.kp-empty { color: var(--kima-muted); font-size: 13px; }

/* Maint card */
.kp-maint-inner { display:flex; align-items:flex-start; gap:20px; justify-content:space-between; }
.kp-maint-info  { flex:1; }
.kp-maint-title { font-size:24px; font-weight:600; margin:0 0 4px; }
.kp-maint-sub   { font-size:13px; color:var(--kima-muted); margin:0 0 14px; }

.kp-pill { display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:20px; font-size:12px; font-weight:500; }
.kp-pill::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.kp-pill--active    { background:var(--kima-green-bg);  color:var(--kima-green); }
.kp-pill--expiring  { background:var(--kima-orange-bg); color:var(--kima-orange); }
.kp-pill--expired   { background:var(--kima-red-bg);    color:var(--kima-red); }
.kp-pill--suspended { background:#f3f4f6; color:#6b7280; }

.kp-maint-bar { margin-top:20px; }
.kp-maint-bar__labels { display:flex; justify-content:space-between; font-size:11px; color:var(--kima-muted); margin-bottom:6px; }

.kp-bar-track { height:6px; background:var(--kima-border); border-radius:99px; overflow:hidden; margin-bottom:4px; }
.kp-bar-fill  { height:100%; border-radius:99px; background:linear-gradient(90deg,var(--kima-blue-mid),var(--kima-blue)); transition:width 1.2s cubic-bezier(.4,0,.2,1); }
.kp-bar-fill--maint { background:linear-gradient(90deg,var(--kima-blue-mid),var(--kima-blue)); }
.kp-bar-fill--warn  { background:linear-gradient(90deg,#f59e0b,#ef4444) !important; }
.kp-bar-labels { display:flex; justify-content:space-between; font-size:11px; color:var(--kima-muted); }

.kp-countdown { text-align:center; background:var(--kima-bg); border-radius:10px; padding:20px 24px; min-width:160px; flex-shrink:0; }
.kp-countdown__num   { font-family:'DM Mono',monospace; font-size:44px; font-weight:500; color:var(--kima-blue); line-height:1; margin-bottom:4px; }
.kp-countdown__label { font-size:11px; color:var(--kima-muted); text-transform:uppercase; letter-spacing:.06em; }

/* Hours card */
.kp-card--hours { text-align:center; }
.kp-donut-wrap  { position:relative; width:80px; height:80px; margin:0 auto 10px; }
.kp-donut-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.kp-donut-num { font-family:'DM Mono',monospace; font-size:18px; font-weight:500; color:var(--kima-text); line-height:1; }
.kp-donut-sub { font-size:9px; color:var(--kima-muted); }
.kp-hours-sub { font-size:13px; font-weight:500; margin-bottom:12px; }
.kp-hours-sub--green  { color:var(--kima-green); }
.kp-hours-sub--orange { color:var(--kima-orange); }
.kp-hours-sub--red    { color:var(--kima-red); }

/* Section title */
.kp-section-title { font-size:16px; font-weight:600; margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.kp-count { background:var(--kima-blue-light); color:var(--kima-blue); font-size:11px; font-weight:600; padding:2px 9px; border-radius:99px; }

/* Table */
.kp-table-wrap { background:var(--kima-white); border:1px solid var(--kima-border); border-radius:14px; overflow:hidden; margin-bottom:28px; animation:kp-up .5s .1s ease both; }
.kp-table { width:100%; border-collapse:collapse; }
.kp-table thead th { font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--kima-muted); padding:13px 20px; text-align:left; background:var(--kima-bg); border-bottom:1px solid var(--kima-border); }
.kp-table tbody tr { border-bottom:1px solid var(--kima-border); transition:background .15s; }
.kp-table tbody tr:last-child { border-bottom:none; }
.kp-table tbody tr:hover { background:var(--kima-blue-light); }
.kp-table td { padding:13px 20px; font-size:13px; vertical-align:middle; }
.kp-td-date { font-family:'DM Mono',monospace; font-size:12px; color:var(--kima-muted); white-space:nowrap; }
.kp-td-desc strong { font-weight:500; }
.kp-td-desc small  { display:block; font-size:11px; color:var(--kima-muted); margin-top:2px; }
.kp-td-hours { font-family:'DM Mono',monospace; font-size:13px; white-space:nowrap; }
.kp-included { color:var(--kima-green); font-weight:500; }

.kp-type-pill { font-size:11px; font-weight:500; padding:3px 10px; border-radius:6px; white-space:nowrap; }
.kp-type-pill--maintenance { background:var(--kima-blue-light); color:var(--kima-blue); }
.kp-type-pill--content     { background:#f3f4f6; color:#374151; }
.kp-type-pill--new_page    { background:var(--kima-green-bg); color:var(--kima-green); }
.kp-type-pill--technical   { background:#fdf4ff; color:#9333ea; }
.kp-type-pill--launch      { background:var(--kima-green-bg); color:var(--kima-green); }
.kp-type-pill--other       { background:#f3f4f6; color:#6b7280; }

/* Bottom grid */
.kp-bottom-grid { display:grid; grid-template-columns:2fr 1fr; gap:20px; margin-bottom:28px; }

/* Buy card */
.kp-card--buy { border:1.5px dashed var(--kima-blue); background:var(--kima-blue-light); }
.kp-buy-options { display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.kp-buy-opt { background:var(--kima-white); border:1.5px solid var(--kima-border); border-radius:10px; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; transition:all .2s; }
.kp-buy-opt:hover         { border-color:var(--kima-blue); box-shadow:0 2px 12px rgba(43,127,212,.1); }
.kp-buy-opt--featured     { border-color:var(--kima-blue); }
.kp-buy-opt--selected     { border-color:var(--kima-blue); box-shadow:0 0 0 2px var(--kima-blue); }
.kp-buy-opt__info         { line-height:1.3; }
.kp-buy-opt__info strong  { font-size:14px; font-weight:600; }
.kp-buy-opt__info small   { display:block; font-size:11px; color:var(--kima-muted); }
.kp-buy-opt__price        { font-family:'DM Mono',monospace; font-size:18px; font-weight:500; color:var(--kima-blue); }
.kp-badge-save { background:var(--kima-green); color:#fff; font-size:10px; font-weight:600; padding:2px 6px; border-radius:99px; margin-left:6px; }

.kp-pay-btn { width:100%; background:var(--kima-blue); color:#fff; border:none; border-radius:10px; padding:13px; font-size:14px; font-weight:500; font-family:'DM Sans',sans-serif; cursor:pointer; transition:all .2s; }
.kp-pay-btn:hover    { background:var(--kima-blue-dark); transform:translateY(-1px); box-shadow:0 4px 16px rgba(43,127,212,.3); }
.kp-pay-btn:disabled { opacity:.6; cursor:not-allowed; transform:none; }
.kp-pay-note         { font-size:11px; color:var(--kima-muted); text-align:center; margin-top:10px; }

/* Contact card */
.kp-card--contact { background:var(--kima-blue); color:#fff; display:flex; flex-direction:column; justify-content:space-between; }
.kp-card--contact h4 { font-size:16px; font-weight:600; margin:0 0 8px; }
.kp-card--contact p  { font-size:13px; opacity:.85; line-height:1.5; margin:0 0 18px; }
.kp-contact-btn { display:block; background:rgba(255,255,255,.15); border:1.5px solid rgba(255,255,255,.3); color:#fff; border-radius:8px; padding:10px 16px; font-size:13px; font-weight:500; text-align:center; text-decoration:none; margin-bottom:10px; transition:background .2s; font-family:'DM Sans',sans-serif; }
.kp-contact-btn:hover    { background:rgba(255,255,255,.28); color:#fff; }
.kp-contact-btn--wa      { background:#25D366; border-color:#25D366; }
.kp-contact-btn--wa:hover { background:#1da84e; }

@media (max-width:768px) {
  .kp-top-grid, .kp-bottom-grid { grid-template-columns:1fr; }
  .kp-maint-inner { flex-direction:column; }
  .kp-countdown   { margin-top:16px; }
  .kp-table-wrap  { overflow-x:auto; }
}