.cmp-account-page { width:100%; }
.cmp-account-page-head { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:18px; margin-bottom:16px; padding:24px 26px; border:1px solid #dbe6f3; border-radius:18px; background:radial-gradient(circle at 92% 0,#dcecff,transparent 42%),linear-gradient(135deg,#fff,#f5f9ff); box-shadow:0 10px 32px rgb(24 55 94 / 6%); }
.cmp-account-page-head__icon { display:grid; width:50px; height:50px; place-items:center; border-radius:14px; color:var(--cmp-blue); background:#fff; box-shadow:0 8px 20px rgb(29 69 116 / 10%); font-size:20px; }
.cmp-account-eyebrow { display:block; margin-bottom:4px; color:#58799e; font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.comparor-ui .cmp-account-page-head h1 { margin:0 0 4px; font-size:clamp(1.55rem,2.5vw,2.15rem); }
.cmp-account-page-head p { max-width:720px; margin:0; color:#67798e; font-size:12px; line-height:1.55; }
.cmp-account-page-head__actions { display:flex; gap:8px; }
.cmp-account-page-head__actions .btn { white-space:nowrap; font-size:11px; }

.cmp-user-nav { position:sticky; top:16px; overflow:hidden; border:1px solid var(--cmp-line); border-radius:17px; background:#fff; box-shadow:var(--cmp-shadow); }
.cmp-user-nav__identity { display:grid; grid-template-columns:42px minmax(0,1fr); align-items:center; gap:11px; padding:20px; border-bottom:1px solid var(--cmp-line); background:linear-gradient(145deg,#f8fbff,#edf5ff); }
.cmp-user-nav__avatar { display:grid; width:42px; height:42px; place-items:center; border-radius:13px; color:#fff; background:linear-gradient(145deg,var(--cmp-blue),#6c4be7); box-shadow:0 8px 18px rgb(13 110 253 / 22%); }
.cmp-user-nav__identity-copy { min-width:0; }
.cmp-user-nav__identity strong,.cmp-user-nav__identity small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cmp-user-nav__identity strong { color:#213650; font-size:13px; }
.cmp-user-nav__identity small { margin-top:2px; color:#718197; font-size:10px; }
.cmp-user-nav__links { display:grid; gap:3px; padding:9px; }
.cmp-user-nav__links a { display:flex; min-width:0; min-height:39px; align-items:center; gap:10px; padding:9px 11px; border-radius:9px; color:#566a82; font-size:11.5px; font-weight:650; text-decoration:none; transition:background .16s,color .16s,transform .16s; }
.cmp-user-nav__links a i { width:18px; flex:0 0 18px; color:#7590b0; text-align:center; }
.cmp-user-nav__links a span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cmp-user-nav__links a:hover { color:var(--cmp-blue); background:var(--cmp-soft); transform:translateX(2px); }
.cmp-user-nav__links a.is-active { color:#fff; background:var(--cmp-blue); box-shadow:0 7px 16px rgb(13 110 253 / 18%); }
.cmp-user-nav__links a.is-active i { color:#fff; }
.cmp-user-nav__logout { margin:0 9px 9px; border-top:1px solid var(--cmp-line); padding-top:9px; }
.cmp-user-nav__logout a { display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:9px; color:#9b4d5d; font-size:11px; font-weight:650; text-decoration:none; }
.cmp-user-nav__logout a:hover { background:#fff1f3; }

.cmp-account-card { margin-bottom:14px; padding:23px; border:1px solid var(--cmp-line); border-radius:17px; background:#fff; box-shadow:var(--cmp-shadow); }
.cmp-account-card__head { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; margin-bottom:19px; }
.cmp-account-card__head > div { display:flex; align-items:center; gap:11px; }
.cmp-account-card__head > div > span { display:grid; width:38px; height:38px; place-items:center; border-radius:11px; color:var(--cmp-blue); background:var(--cmp-soft); }
.comparor-ui .cmp-account-card__head h2 { margin:0 0 2px; font-size:16px; }
.cmp-account-card__head p { margin:0; color:#77879a; font-size:10.5px; }
.cmp-account-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.cmp-account-field { min-width:0; }
.cmp-account-field--full { grid-column:1/-1; }
.cmp-account-field label { display:block; margin-bottom:6px; color:#344a65; font-size:10.5px; font-weight:700; }
.cmp-account-field .form-control,.cmp-account-field .form-select { width:100%; min-height:45px; }
.cmp-account-help { margin-top:5px; color:#8190a3; font-size:9.5px; line-height:1.45; }
.cmp-account-static { display:flex; min-height:45px; align-items:center; gap:9px; padding:10px 12px; border:1px solid #d8e1ed; border-radius:10px; color:#435a74; background:#f8fafc; font-size:11.5px; }
.cmp-account-actions { display:flex; grid-column:1/-1; align-items:center; justify-content:flex-end; gap:9px; padding-top:4px; }
.cmp-account-actions .btn { font-size:11px; }
.cmp-account-check { display:flex; align-items:center; gap:8px; color:#52657c; font-size:11px; cursor:pointer; }

.cmp-account-auth { width:100%; }
.cmp-account-auth__hero { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr); align-items:center; gap:28px; margin-bottom:18px; padding:38px 42px; overflow:hidden; border:1px solid #d8e5f4; border-radius:22px; background:radial-gradient(circle at 88% 15%,#cfe4ff,transparent 35%),linear-gradient(135deg,#fff,#f0f6ff); box-shadow:0 13px 38px rgb(24 55 94 / 7%); }
.cmp-account-auth__hero .cmp-account-eyebrow { color:var(--cmp-blue); }
.comparor-ui .cmp-account-auth__hero h1 { max-width:610px; margin:9px 0 12px; font-size:clamp(2rem,4vw,3.25rem); line-height:1.06; }
.cmp-account-auth__hero p { max-width:600px; margin:0; color:#61748b; font-size:14px; line-height:1.7; }
.cmp-account-auth__visual { display:grid; min-height:190px; place-items:center; }
.cmp-account-auth__visual > div { position:relative; display:grid; width:150px; height:150px; place-items:center; border:1px solid rgb(255 255 255 / 75%); border-radius:42px; color:#fff; background:linear-gradient(145deg,var(--cmp-blue),#7047e9); box-shadow:0 25px 65px rgb(49 93 193 / 28%); font-size:56px; transform:rotate(4deg); }
.cmp-account-auth__visual span { position:absolute; display:grid; width:42px; height:42px; place-items:center; border:1px solid #d8e5f4; border-radius:13px; color:var(--cmp-blue); background:#fff; box-shadow:0 8px 20px rgb(30 61 100 / 14%); font-size:16px; }
.cmp-account-auth__visual span:first-child { left:-35px; top:16px; }
.cmp-account-auth__visual span:last-child { right:-29px; bottom:13px; }
.cmp-account-auth__grid { display:grid; grid-template-columns:1.15fr .85fr .85fr; align-items:stretch; gap:13px; }
.cmp-auth-card { display:flex; min-width:0; flex-direction:column; padding:24px; border:1px solid var(--cmp-line); border-radius:17px; background:#fff; box-shadow:var(--cmp-shadow); }
.cmp-auth-card--primary { border-color:#cfe0f6; }
.cmp-auth-card__icon { display:grid; width:42px; height:42px; margin-bottom:14px; place-items:center; border-radius:12px; color:var(--cmp-blue); background:var(--cmp-soft); font-size:17px; }
.comparor-ui .cmp-auth-card h2 { margin:0 0 5px; font-size:18px; }
.cmp-auth-card > p { min-height:35px; margin:0 0 17px; color:#75869a; font-size:10.5px; }
.cmp-auth-card form { display:grid; gap:12px; }
.cmp-auth-card .btn { width:100%; justify-content:center; font-size:11px; }
.cmp-auth-card__footer { display:grid; gap:8px; margin-top:auto; padding-top:17px; }
.cmp-auth-benefits { display:grid; gap:9px; margin:0; padding:0; list-style:none; color:#5c6f85; font-size:11px; }
.cmp-auth-benefits i { margin-right:7px; color:#2aa66b; }
.cmp-auth-divider { display:flex; align-items:center; gap:10px; margin:10px 0; color:#93a0af; font-size:9px; text-transform:uppercase; }
.cmp-auth-divider::before,.cmp-auth-divider::after { height:1px; flex:1; background:var(--cmp-line); content:""; }
.cmp-social-button { display:flex; min-height:42px; align-items:center; justify-content:center; gap:8px; border:1px solid #d9e2ee; border-radius:10px; color:#42566f; background:#fff; font-size:11px; font-weight:650; text-decoration:none; }
.cmp-social-button:hover { color:var(--cmp-blue); background:var(--cmp-soft); }

.cmp-account-alert { display:flex; align-items:flex-start; gap:10px; margin-bottom:14px; padding:13px 15px; border:1px solid #cfe5d8; border-radius:12px; color:#2d6d49; background:#f0fbf5; font-size:11px; }
.cmp-account-alert--danger { border-color:#f0ccd2; color:#9c3f50; background:#fff3f5; }
.cmp-account-alert--warning { border-color:#f1dfb3; color:#81621d; background:#fff9e9; }
.cmp-account-empty { display:grid; min-height:260px; place-items:center; align-content:center; padding:40px 25px; border:1px dashed #cfdbea; border-radius:18px; background:linear-gradient(145deg,#fff,#f8faff); text-align:center; }
.cmp-account-empty > span { display:grid; width:62px; height:62px; margin-bottom:15px; place-items:center; border-radius:18px; color:var(--cmp-blue); background:var(--cmp-soft); font-size:25px; }
.comparor-ui .cmp-account-empty h2 { margin:0 0 7px; font-size:19px; }
.cmp-account-empty p { max-width:470px; margin:0 0 18px; color:#728398; font-size:11.5px; }
.cmp-account-empty .btn { display:inline-flex; align-items:center; gap:8px; font-size:11px; }
.cmp-account-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.cmp-account-grid .cmp-product-card { min-width:0; }
.cmp-account-product-wrap { min-width:0; overflow:hidden; border:1px solid var(--cmp-line); border-radius:17px; background:#fff; box-shadow:var(--cmp-shadow); }
.cmp-account-product-wrap .cmp-product-card { border:0; border-radius:0; box-shadow:none; }
.cmp-account-product-note { display:grid; gap:10px; padding:14px; border-top:1px solid var(--cmp-line); background:#fbfcfe; }
.cmp-account-product-note p { margin:0; color:#5e7187; font-size:10.5px; line-height:1.55; }
.cmp-account-product-note .btn { justify-self:start; font-size:9.5px; }
.cmp-account-rating { color:#f2aa22; font-size:11px; letter-spacing:2px; }
.cmp-account-target { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:1px 8px; }
.cmp-account-target > i { grid-row:1/3; color:var(--cmp-blue); font-size:19px; }
.cmp-account-target small { color:#7c8b9e; font-size:9px; }
.cmp-account-target strong { color:#29445f; font-size:14px; }

.cmp-dashboard-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.cmp-dashboard-tile { position:relative; display:flex; min-height:155px; flex-direction:column; align-items:flex-start; padding:20px; overflow:hidden; border:1px solid var(--cmp-line); border-radius:16px; color:inherit; background:#fff; box-shadow:var(--cmp-shadow); text-decoration:none; transition:transform .18s,box-shadow .18s,border-color .18s; }
.cmp-dashboard-tile:hover { color:inherit; border-color:#b8d2f4; box-shadow:0 14px 32px rgb(24 55 94 / 10%); transform:translateY(-2px); }
.cmp-dashboard-tile > i { display:grid; width:39px; height:39px; margin-bottom:18px; place-items:center; border-radius:11px; color:var(--cmp-blue); background:var(--cmp-soft); font-size:16px; }
.cmp-dashboard-tile strong { font-size:14px; }
.cmp-dashboard-tile span { margin-top:4px; color:#738398; font-size:10.5px; line-height:1.45; }
.cmp-dashboard-tile > .fa-arrow-right { position:absolute; right:17px; bottom:17px; width:auto; height:auto; margin:0; color:#9aabc0; background:none; font-size:12px; }

.cmp-account-list { display:grid; gap:10px; }
.cmp-account-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:16px; padding:16px; border:1px solid var(--cmp-line); border-radius:13px; background:#fff; }
.cmp-account-row__main { display:flex; min-width:0; align-items:center; gap:12px; }
.cmp-account-row__icon { display:grid; width:40px; height:40px; flex:0 0 40px; place-items:center; border-radius:11px; color:var(--cmp-blue); background:var(--cmp-soft); }
.cmp-account-row strong,.cmp-account-row small { display:block; }
.cmp-account-row strong { color:#29415e; font-size:12px; }
.cmp-account-row small { margin-top:3px; color:#7d8b9d; font-size:10px; }
.cmp-account-row__actions { display:flex; align-items:center; gap:7px; }
.cmp-account-row__actions .btn { font-size:10px; }
.cmp-account-danger { color:#a23d50!important; border-color:#efd2d8!important; background:#fff7f8!important; }
.cmp-account-danger:hover { color:#fff!important; border-color:#bd4159!important; background:#bd4159!important; }

.cmp-address-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.cmp-address-card { display:flex; min-width:0; flex-direction:column; padding:18px; border:1px solid var(--cmp-line); border-radius:14px; background:#fbfcfe; }
.cmp-address-card__badges { min-height:24px; margin-bottom:9px; }
.cmp-address-card__badges .badge { margin-right:4px; font-size:8px; }
.cmp-address-card address { margin:0 0 14px; color:#596d84; font-size:10.5px; font-style:normal; line-height:1.6; }
.cmp-address-card__actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; }
.cmp-address-card__actions .btn { padding:6px 8px; font-size:9px; }
.cmp-api-key { display:flex; gap:8px; }
.cmp-api-key input { min-width:0; flex:1; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:11px; }
.cmp-api-add { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:9px; margin-top:15px; }
.cmp-api-add .btn { min-height:45px; font-size:10.5px; }
.cmp-api-usage { padding:7px 10px; border-radius:8px; color:#245e9f; background:var(--cmp-soft); font-size:9.5px; }
.cmp-account-inline-empty { display:flex; align-items:center; gap:8px; margin:0; padding:14px; border-radius:11px; color:#687b91; background:#f7f9fc; font-size:11px; }
.cmp-api-docs { display:grid; gap:10px; }
.cmp-api-docs details { border:1px solid var(--cmp-line); border-radius:12px; background:#fff; }
.cmp-api-docs summary { padding:14px 16px; color:#304b69; font-size:11.5px; font-weight:700; cursor:pointer; }
.cmp-api-docs details > div { padding:0 16px 16px; color:#607389; font-size:11px; line-height:1.65; }
.cmp-api-docs code,.cmp-api-code { display:block; overflow-x:auto; padding:13px; border-radius:9px; color:#dcecff; background:#172b47; font:10.5px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; }

@media (max-width:1100px) { .cmp-account-auth__grid { grid-template-columns:1fr 1fr; } .cmp-auth-card--primary { grid-row:span 2; } .cmp-dashboard-grid,.cmp-account-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:767.98px) {
  .cmp-account-page-head { grid-template-columns:auto 1fr; padding:20px; }
  .cmp-account-page-head__actions { grid-column:1/-1; }
  .cmp-user-nav { position:static; margin-bottom:14px; }
  .cmp-user-nav__identity { display:none; }
  .cmp-user-nav__links { display:flex; overflow-x:auto; padding:8px; scrollbar-width:none; }
  .cmp-user-nav__links a { flex:0 0 auto; }
  .cmp-user-nav__links a:hover { transform:none; }
  .cmp-user-nav__logout { margin:0 8px 8px; padding-top:6px; }
  .cmp-account-auth__hero { grid-template-columns:1fr; padding:30px 24px; }
  .cmp-account-auth__visual { display:none; }
  .cmp-account-auth__grid { grid-template-columns:1fr; }
  .cmp-auth-card--primary { grid-row:auto; }
  .cmp-dashboard-grid,.cmp-account-grid,.cmp-address-grid { grid-template-columns:1fr; }
  .cmp-account-form { grid-template-columns:1fr; }
  .cmp-account-field--full,.cmp-account-actions { grid-column:auto; }
  .cmp-account-card { padding:19px 16px; }
  .cmp-account-row { grid-template-columns:1fr; }
  .cmp-account-row__actions { justify-content:flex-start; }
  .cmp-api-key { flex-direction:column; }
  .cmp-api-add { grid-template-columns:1fr; }
  .cmp-api-key .btn { width:100%; }
}