/* Agencies (docs/agency.md): the catalogue /agentlikler, a showcase /agentlik/{slug} and the account page /agentliyim.
   Inline on those three pages only, so the page cut of style.css is not touched. ASCII only, like every served CSS. */

/* -- shared ------------------------------------------------------------------------------------------------- */
.ag-logo{display:grid;place-items:center;flex:none;overflow:hidden;width:56px;height:56px;border:1px solid var(--line-soft);border-radius:14px;background:var(--white)}
.ag-logo img{display:block;width:100%;height:100%;object-fit:contain}
.ag-logo--empty{background:var(--accent-deep-tint);color:var(--accent);font-size:22px;font-weight:700}
.ag-logo--lg{width:96px;height:96px;border-radius:20px;font-size:36px}
.ag-seal{color:var(--ok);font-size:15px;vertical-align:-2px}
.ag-h2{display:flex;align-items:center;gap:8px;margin:0 0 16px;color:var(--ink);font-size:17px;font-weight:700}
.ag-h2 i{color:var(--accent);font-size:19px}
.ag-muted{color:var(--ink-3)}
.btn.btn-sm{height:34px;padding:0 14px;border-radius:9px;font-size:12.5px}
.field-hint{display:block;margin-top:6px;color:var(--ink-3);font-size:12px;line-height:1.45}

/* -- the catalogue -------------------------------------------------------------------------------------------- */
.ag-hero{margin:28px 0 26px}
.ag-hero h1{margin:8px 0 10px}
.ag-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.ag-card{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid var(--line-soft);border-radius:16px;background:var(--white);color:var(--ink);box-shadow:0 1px 2px rgba(var(--ink-rgb),.04);transition:border-color .15s,box-shadow .15s}
.ag-card .ag-logo{width:64px;height:64px;border-radius:16px}
.ag-card-body{display:flex;flex-direction:column;align-items:flex-start;gap:4px;flex:1;min-width:0}
.ag-card-name{display:flex;align-items:center;gap:6px;max-width:100%;font-size:16px;font-weight:700;line-height:1.3}
.ag-card-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-card-name .ag-seal{flex:none;font-size:17px;vertical-align:0}
.ag-card-addr{display:flex;align-items:center;gap:5px;max-width:100%;color:var(--ink-3);font-size:13px;line-height:1.4}
.ag-card-addr i{flex:none;font-size:14px}
.ag-card-addr span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-card-stats{display:inline-flex;align-items:center;gap:5px;margin-top:4px;padding:3px 9px;border-radius:9px;background:rgba(var(--ink-rgb),.05);color:var(--ink-2);font-size:12px;line-height:1.5}
.ag-card-stats i{color:var(--ink-3);font-size:13px}
.ag-card-stats b{color:var(--ink);font-weight:700}
.ag-card-go{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:9px;color:var(--ink-3);font-size:16px;transition:transform .15s,color .15s,background .15s}
@media (hover:hover) and (pointer:fine){
  .ag-card:hover{border-color:rgba(var(--ink-rgb),.2);box-shadow:var(--rest-shadow)}
  .ag-card:hover .ag-card-go{background:rgba(var(--accent-rgb),.08);color:var(--accent);transform:translateX(2px)}
}
.ag-cta{margin-top:40px}

/* -- a showcase ----------------------------------------------------------------------------------------------- */
/* One row, the logo — 120px — standing 24px over the card's top edge on a white frame;
   the text starts its own way below the edge — the name, then the
   address and the e-mail on one line — a little above the logo's foot; the buttons at the middle of the row; the
   facts as quiet chips along the bottom. The logo keeps clear of the crumbs above, and its frame is the card's own
   colour with a soft shadow, no second ring. */
.agp-hero{position:relative;margin:58px 0 22px;border:1px solid var(--line-soft);border-radius:20px;background:var(--white);box-shadow:var(--rest-shadow)}
.agp-hero-main{display:flex;align-items:flex-start;gap:22px;padding:0 28px 24px}
.agp-logo{width:120px;height:120px;margin-top:-24px;border:4px solid var(--white);border-radius:26px;background:var(--white);font-size:46px;box-shadow:0 10px 24px -14px rgba(var(--ink-rgb),.45)}
.agp-logo.ag-logo--empty{background:var(--accent-deep-tint)}
.agp-hero-text{flex:1;min-width:0;padding-top:18px}
.agp-hero-text h1{margin:0;font-size:34px;line-height:1.15;overflow-wrap:anywhere}
.agp-seal{margin-left:10px;color:var(--ok);font-size:24px;vertical-align:2px}
.agp-meta{overflow:hidden;margin:8px 0 0;color:var(--ink-2);font-size:14px}
/* The site's dot between the address and the e-mail (as .saved-search-more's), 9px either side: a 4px box with 9px
   before it and 3px after (the item's own 6px gap stands after it). Every item carries one; the row is pulled 22px
   left inside the clipping .agp-meta, so the first item of each line has its dot cut off — none starts a line. */
.agp-meta-row{display:flex;flex-wrap:wrap;align-items:center;row-gap:4px;margin-left:-22px}
.agp-meta-row>span{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%}
.agp-meta-row>span::before{content:"\00b7";display:inline-block;flex:none;width:4px;margin:0 3px 0 9px;color:var(--ink-3);opacity:.75;text-align:center}
.agp-mail{overflow:hidden;color:inherit;text-overflow:ellipsis;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.agp-mail:hover{color:var(--accent)}}
.agp-contacts{display:flex;flex-direction:column;align-items:flex-end;align-self:center;gap:10px;flex:none;max-width:55%}
.agp-contacts-row{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
/* The other numbers, opened: a quiet line of links under the buttons, the site's dot between them. */
.agp-phones-more{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 16px;font-size:13.5px;font-weight:600}
.agp-phones-more a{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2)}
.agp-phones-more i{color:var(--ink-3);font-size:14px}
@media (hover:hover) and (pointer:fine){.agp-phones-more a:hover{color:var(--accent)}}
.agp-contacts .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 16px;white-space:nowrap}
.agp-facts{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:14px 28px;border-top:1px solid var(--line-soft);list-style:none}
.agp-fact{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:9px;background:rgba(var(--ink-rgb),.05);color:var(--ink-2);font-size:13px}
.agp-fact i{color:var(--ink-3);font-size:15px}
.agp-fact b{color:var(--ink);font-weight:700}
.agp-fact--ok{background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok);font-weight:700}
.agp-fact--ok i{color:inherit}
/* What they say about themselves, in a card of its own under the head one. */
.agp-card{padding:22px 24px;border:1px solid var(--line-soft);border-radius:18px;background:var(--white)}
.agp-about-card{margin:0 0 30px}
.agp-h2{display:flex;align-items:center;gap:8px;margin:0 0 14px;color:var(--ink);font-size:17px;font-weight:700}
.agp-h2 i{color:var(--accent);font-size:19px}
.agp-about{margin:0;color:var(--ink-2);font-size:15px;line-height:1.7;white-space:pre-line}
.agp-about.is-clamped{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4}
.agp-more{display:inline-flex;align-items:center;gap:5px;margin-top:10px;padding:0;border:0;background:none;color:var(--accent);cursor:pointer;font:inherit;font-size:14px;font-weight:600;transition:color .15s}
.agp-more i{font-size:13px;transition:transform .15s}
/* Under the pointer: a shade deeper, the caret a step towards where it goes — no underline under the word and the caret. */
@media (hover:hover) and (pointer:fine){
  .agp-more:hover{color:var(--accent-deep)}
  .agp-more:hover i{transform:translateY(2px)}
  .agp-more[aria-expanded="true"]:hover i{transform:translateY(-2px)}
}
.agp-more:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.section-head.agp-ads-head{margin-top:8px;margin-bottom:18px;padding-top:0;background:none}
@media (max-width:760px){
  .agp-hero{margin-top:48px}
  .agp-hero-main{flex-wrap:wrap;gap:14px;padding:0 18px 18px}
  .agp-logo{width:92px;height:92px;margin-top:-22px;border-width:3px;border-radius:22px;font-size:34px}
  .agp-hero-text{flex-basis:100%;padding-top:0}
  .agp-hero-text h1{font-size:26px}
  .agp-seal{font-size:20px}
  .agp-contacts{width:100%;max-width:none;align-items:stretch}
  .agp-contacts-row{flex-wrap:nowrap}
  .agp-phones-more{justify-content:flex-start}
  .agp-contacts .btn{flex:1 1 auto;min-width:0}
  .agp-contacts .agp-wa{flex:0 0 42px;width:42px;padding:0}
  .agp-contact-label{position:absolute;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);white-space:nowrap}
  .agp-facts{padding:12px 18px}
  .agp-card{padding:18px}
}

/* -- the account page ----------------------------------------------------------------------------------------- */
.ag-panel{margin-bottom:18px}
/* The four in one line on a desktop, two on a tablet, one on a phone. */
.ag-perks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 18px}
@media (max-width:1100px){.ag-perks{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ag-perk{padding:16px;border:1px solid var(--line-soft);border-radius:14px;background:var(--white)}
.ag-perk-icon{display:grid;place-items:center;width:38px;height:38px;margin-bottom:10px;border-radius:12px;background:var(--accent-deep-tint);color:var(--accent);font-size:19px}
.ag-perk strong{display:block;color:var(--ink);font-size:14px}
.ag-perk p{margin:4px 0 0;color:var(--ink-2);font-size:13px;line-height:1.5}
@media (max-width:560px){.ag-perks{grid-template-columns:1fr}}
/* style.css gives every .field but the first a top margin: in a two-column grid that set the second column 18px
   below the first. One rhythm here instead — space under each field — and the cells top-aligned, so a hint under one
   field does not push its neighbour down. */
.ag-form .field,.ag-form .field:first-child{display:block;margin:0 0 18px}
.ag-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;align-items:start}
@media (max-width:640px){.ag-form-grid{grid-template-columns:1fr}}
.ag-textarea{display:block;width:100%;min-height:96px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--white);color:var(--ink);font:inherit;font-size:14px;line-height:1.5;resize:vertical}
.ag-textarea:focus{outline:none;border-color:var(--accent)}
.ag-doc{position:relative;display:flex;align-items:center;gap:14px;padding:14px;border:1px dashed rgba(var(--ink-rgb),.24);border-radius:14px;background:var(--white);cursor:pointer;transition:border-color .15s,background .15s}
.ag-doc input[type="file"]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ag-doc:focus-within{outline:2px solid var(--accent);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.ag-doc:hover{border-color:var(--accent);background:var(--accent-deep-tint)}}
.ag-doc-art{display:grid;place-items:center;flex:none;overflow:hidden;width:64px;height:48px;border-radius:10px;background:var(--accent-deep-tint);color:var(--accent);font-size:22px}
.ag-doc-art img{width:100%;height:100%;object-fit:cover}
.ag-doc-text{min-width:0}
.ag-doc-text strong{display:block;color:var(--ink);font-size:14px}
.ag-doc-text small{display:block;overflow:hidden;color:var(--ink-3);font-size:12.5px;text-overflow:ellipsis;white-space:nowrap}
.ag-doc.is-filled{border-style:solid;border-color:color-mix(in srgb,var(--ok) 50%,transparent);background:color-mix(in srgb,var(--ok) 7%,transparent)}
.ag-doc.is-error{border-style:solid;border-color:rgba(var(--danger-rgb),.5);background:rgba(var(--danger-rgb),.045)}
.ag-consent{margin-top:16px}
.vf-consent{display:flex;align-items:flex-start;gap:10px;margin:18px 0 0;color:var(--ink-2);font-size:13px;line-height:1.55;cursor:pointer}
.vf-consent input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--accent);cursor:pointer}
.vf-consent a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
/* The send button and «Müraciəti geri götür» on one line, centred on each other; the quiet one goes red on hover. */
.ag-form-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;margin-top:22px}
/* The office numbers: a field each, the label as every other field's (so the first lines up with WhatsApp beside it),
   a small × beside the second and third, «Nömrə əlavə et» a quiet dashed button under them with the hint beside it. */
.ag-phone-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.ag-phone-row+.ag-phone-row{margin-top:8px}
.ag-phone-row .field-input{flex:1;min-width:0}
.ag-phone-row .field-error{flex-basis:100%;margin-top:0}
.ag-phone-drop{display:grid;place-items:center;flex:none;width:40px;height:40px;border:1px solid var(--line);border-radius:9px;background:var(--white);color:var(--ink-3);cursor:pointer;font-size:15px}
@media (hover:hover) and (pointer:fine){.ag-phone-drop:hover{border-color:rgba(var(--danger-rgb),.45);color:var(--danger)}}
.ag-phones-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:10px}
.ag-phones .ag-phone-add{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border:1px dashed var(--line);border-radius:9px;color:var(--ink-2);font-size:13px}
.ag-phone-add i{font-size:14px}
@media (hover:hover) and (pointer:fine){.ag-phones .ag-phone-add:hover{border-color:var(--accent);color:var(--accent)}}
.ag-phones-foot .field-hint,.ag-phones-foot .field-error{margin:0}
/* The profile form, come back to after a save: its place under the sticky header, the word by its button. */
#ag-profile{scroll-margin-top:84px}
.ag-saved{display:inline-flex;align-items:center;gap:6px;color:var(--ok);font-size:13.5px;font-weight:600;animation:agSaved .3s ease-out}
.ag-saved i{font-size:17px}
@keyframes agSaved{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ag-saved{animation:none}}
.ag-text-btn{display:inline-flex;align-items:center;gap:7px;padding:0;border:0;background:none;color:var(--ink-3);cursor:pointer;font:inherit;font-size:13.5px;font-weight:600;line-height:1.3;transition:color .15s}
.ag-text-btn i{font-size:16px}
@media (hover:hover) and (pointer:fine){.ag-text-btn:hover{color:var(--danger)}}
.ag-text-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.vf-state{display:flex;align-items:flex-start;gap:12px;margin-bottom:18px;padding:16px 18px;border:1px solid var(--line-soft);border-radius:14px;background:var(--white)}
.vf-state i{flex:none;font-size:24px}
.vf-state strong{display:block;color:var(--ink);font-size:15px}
.vf-state p{margin:4px 0 0;color:var(--ink-2);font-size:13.5px;line-height:1.5}
.vf-state--wait{--wait-c:#2563EB;border-color:color-mix(in srgb,var(--wait-c) 30%,transparent);background:color-mix(in srgb,var(--wait-c) 8%,transparent)}
.vf-state--wait i{color:var(--wait-c)}
:root[data-theme="dark"] .vf-state--wait{--wait-c:#7BA5F5}
.vf-state--no{border-color:rgba(var(--danger-rgb),.3);background:rgba(var(--danger-rgb),.07)}
.vf-state--no i{color:var(--danger)}
/* An invitation: a card of its own in the brand's tint. */
.ag-invite{margin-bottom:18px;padding:18px 20px;border:1px solid rgba(var(--accent-rgb),.22);border-radius:16px;background:var(--accent-deep-tint)}
.ag-invite-main{display:flex;align-items:center;gap:16px}
.ag-invite-logo{width:52px;height:52px;border-radius:14px;font-size:20px}
.ag-invite-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.ag-invite-kicker{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.ag-invite-kicker i{font-size:14px}
.ag-invite-name{overflow:hidden;color:var(--ink);font-size:17px;font-weight:700;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.ag-invite-name:hover{text-decoration:underline;text-underline-offset:3px}}
.ag-invite-meta{color:var(--ink-3);font-size:12.5px}
.ag-invite-meta:empty{display:none}
.ag-invite-actions{display:flex;align-items:center;gap:8px;flex:none}
.ag-invite-actions .btn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 16px}
.ag-invite-note{display:flex;align-items:flex-start;gap:8px;margin:14px 0 0;padding-top:12px;border-top:1px solid rgba(var(--accent-rgb),.14);color:var(--ink-2);font-size:12.5px;line-height:1.5}
.ag-invite-note i{flex:none;margin-top:2px;font-size:14px;color:var(--ink-3)}
@media (max-width:560px){
  .ag-invite{padding:16px}
  .ag-invite-main{flex-wrap:wrap}
  .ag-invite-actions{width:100%}
  .ag-invite-actions form{flex:1}
  .ag-invite-actions .btn{width:100%;justify-content:center}
}
/* The quota: the count large, a bar that turns amber near the end and red when full, the room left under it; then
   the package in three small cells, or — with none — a quiet note (and «Paket seç» for the head). */
.ag-quota .ag-panel-head{margin-bottom:14px}
.ag-quota-plan{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:9px;background:rgba(var(--ink-rgb),.06);color:var(--ink-2);font-size:12px;font-weight:700}
.ag-quota-plan.is-paid{background:rgba(var(--accent-rgb),.1);color:var(--accent)}
.ag-quota-plan i{font-size:14px}
.ag-quota-count{display:flex;align-items:baseline;gap:8px;margin-bottom:12px}
.ag-quota-count strong{color:var(--ink);font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:1}
.ag-quota-count span{color:var(--ink-3);font-size:14px;font-weight:600}
.ag-quota-bar{display:block;overflow:hidden;height:8px;border-radius:9px;background:rgba(var(--ink-rgb),.07)}
.ag-quota-bar span{display:block;min-width:8px;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--accent),var(--accent-deep));transition:width .4s}
.ag-quota-bar.is-near span{background:linear-gradient(90deg,#f5b041,#d97706)}
.ag-quota-bar.is-full span{background:var(--danger)}
.ag-quota-under{display:flex;justify-content:space-between;gap:12px;margin-top:8px;color:var(--ink-3);font-size:12.5px}
.ag-quota-under strong{color:var(--ink-2);font-weight:700;white-space:nowrap}
.ag-quota-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px}
.ag-quota-stat{display:flex;align-items:center;gap:10px;min-width:0;padding:12px;border-radius:12px;background:rgba(var(--ink-rgb),.035)}
.ag-quota-stat>i{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;background:var(--white);color:var(--accent);font-size:17px;box-shadow:0 1px 2px rgba(var(--ink-rgb),.08)}
.ag-quota-stat:last-child>i{color:#d97706}
.ag-quota-stat span{display:flex;flex-direction:column;min-width:0}
.ag-quota-stat strong{color:var(--ink);font-size:15px;font-weight:700;white-space:nowrap}
.ag-quota-stat small{overflow:hidden;color:var(--ink-3);font-size:12px;text-overflow:ellipsis;white-space:nowrap}
.ag-quota-none{display:flex;align-items:center;gap:10px;margin-top:18px;padding:12px 14px;border-radius:12px;background:rgba(var(--ink-rgb),.035);color:var(--ink-2);font-size:13px;line-height:1.45}
.ag-quota-none>i{flex:none;color:var(--ink-3);font-size:18px}
.ag-quota-none>span{flex:1;min-width:0}
.ag-quota-none .btn{flex:none}
.ag-quota-link{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:13px}
@media (max-width:560px){
  .ag-quota-stats{grid-template-columns:1fr;gap:8px}
  .ag-quota-none{flex-wrap:wrap}
  .ag-quota-none .btn{flex:1 1 100%;justify-content:center}
}
/* The team: a face, the name and its chips, the phone and the day; the action quiet at the end of the row. */
.ag-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.ag-panel-head .ag-h2{margin:0}
.ag-count{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:9px;background:var(--accent-deep-tint);color:var(--accent);font-size:12px;font-weight:700}
.ag-count i{font-size:13px}
/* Every place taken: the count turns quiet amber. */
.ag-count--full{background:rgba(217,119,6,.12);color:#b45309}
:root[data-theme="dark"] .ag-count--full{background:rgba(245,158,11,.14);color:#f59e0b}
.ag-members{margin:0;padding:0;list-style:none}
/* Rows that light up under the pointer; a face in the brand's gradient, the head's ringed. */
.ag-member{display:flex;align-items:center;gap:14px;margin:0 -12px;padding:12px;border-radius:14px;transition:background .15s}
.ag-member+.ag-member{margin-top:2px}
@media (hover:hover) and (pointer:fine){.ag-member:hover{background:rgba(var(--ink-rgb),.035)}}
.ag-member-avatar{position:relative;display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:center/cover no-repeat var(--line-soft)}
.ag-member-avatar--empty{background:linear-gradient(135deg,var(--accent),var(--accent-deep));color:#fff;font-size:17px;font-weight:700;box-shadow:0 6px 16px -8px rgba(var(--accent-rgb),.7)}
.ag-member-avatar--owner{box-shadow:0 0 0 3px var(--white),0 0 0 5px rgba(var(--accent-rgb),.35)}
.ag-member-avatar--wait{background:rgba(var(--ink-rgb),.05);color:var(--ink-3);font-size:18px;box-shadow:none}
.ag-member-text{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.ag-member-name{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;min-width:0}
.ag-member-who{overflow:hidden;max-width:100%;color:var(--ink);font-size:14.5px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
.ag-member-meta{display:flex;flex-wrap:wrap;color:var(--ink-3);font-size:12.5px}
.ag-member-since::before{content:"\00b7";margin:0 6px}
.ag-member--pending .ag-member-who{color:var(--ink-2)}
/* Small marks by the name: the head's in the brand's gradient with its crown; «siz» and «Gözləyir» quiet. */
.ag-tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:9px;background:rgba(var(--ink-rgb),.06);color:var(--ink-3);font-size:11px;font-weight:700;line-height:1.5}
.ag-tag i{font-size:11px}
.ag-tag--owner{background:linear-gradient(135deg,var(--accent),var(--accent-deep));color:#fff}
.ag-tag--wait{border:1px dashed var(--line);background:transparent}
/* The row's one action: a small button at its end, red only when it is about to be pressed. */
.ag-member-action{flex:none}
.ag-member-btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:1px solid var(--line);border-radius:9px;background:var(--white);color:var(--ink-2);cursor:pointer;font:inherit;font-size:12.5px;font-weight:600;transition:border-color .15s,color .15s,background .15s}
.ag-member-btn i{font-size:14px}
@media (hover:hover) and (pointer:fine){
  .ag-member-btn:hover{border-color:rgba(var(--ink-rgb),.3);color:var(--ink)}
  .ag-member-btn--danger:hover{border-color:rgba(var(--danger-rgb),.45);background:rgba(var(--danger-rgb),.05);color:var(--danger)}
}
.ag-member-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* A phone: the date under the number, and the buttons down to their icon (the word stays for a screen reader). */
@media (max-width:560px){
  .ag-member{gap:12px}
  .ag-member-meta{flex-direction:column;gap:1px}
  .ag-member-since::before{content:none}
  .ag-member-btn{justify-content:center;width:36px;height:36px;padding:0}
  .ag-member-btn i{font-size:16px}
  .ag-member-btn-label{position:absolute;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);white-space:nowrap}
}
/* The invitation form: a quiet box under the list. */
.ag-team-invite{display:flex;align-items:flex-end;flex-wrap:wrap;gap:12px;margin-top:14px;padding:16px;border:1px solid var(--line-soft);border-radius:14px;background:rgba(var(--ink-rgb),.025)}
.ag-team-invite .field,.ag-team-invite .field:first-child{flex:1 1 260px;min-width:0;margin:0}
.ag-team-invite .field-input{min-width:0}
.ag-team-invite .field-input input{min-width:0;width:100%}
.ag-team-invite .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px}
@media (max-width:560px){.ag-team-invite .field,.ag-team-invite .field:first-child,.ag-team-invite .btn{flex:1 1 100%}}
/* No place left: the invitation form gives way to what the number is and where more places are. */
.ag-team-full{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-top:14px;padding:14px 16px;border:1px solid var(--line-soft);border-radius:14px;background:rgba(var(--ink-rgb),.025)}
.ag-team-full>i{flex:none;color:var(--ink-3);font-size:20px}
.ag-team-full p{flex:1 1 220px;margin:0;color:var(--ink-2);font-size:13px;line-height:1.5}
.ag-team-full .btn{display:inline-flex;align-items:center;gap:8px;height:42px}
@media (max-width:560px){.ag-team-full .btn{flex:1 1 100%;justify-content:center}}
.ag-team-hint{flex:1 1 100%;margin-top:-2px}
.ag-logo-row{display:flex;align-items:center;gap:18px;margin-bottom:22px}
.ag-logo-side{min-width:0}
.ag-logo-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px 20px}
.ag-logo-pick{position:relative;display:inline-flex;align-items:center;gap:8px;height:42px;cursor:pointer}
.ag-logo-pick input{position:absolute;width:1px;height:1px;opacity:0}
.ag-logo-pick:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.ag-logo-side .field-hint{margin-top:8px}
/* A row of its own — Google, leaving the team: a mark, two lines on what it does, the button at the end. */
.ag-row{display:flex;align-items:center;gap:14px}
.ag-row>div{flex:1;min-width:0}
.ag-row strong{display:block;color:var(--ink);font-size:14px}
.ag-row small{display:block;margin-top:3px;color:var(--ink-3);font-size:12.5px;line-height:1.45}
.ag-row>form{flex:none}
.ag-row-icon{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;background:rgba(var(--danger-rgb),.08);color:var(--danger);font-size:19px}
.ag-leave .ag-member-btn{width:auto;height:36px;padding:0 16px}
/* A phone: the two lines get the width, the button goes under them, full width. */
@media (max-width:560px){
  .ag-row{flex-wrap:wrap}
  .ag-row>div{flex-basis:calc(100% - 54px)}
  .ag-row>form,.ag-row>.btn{flex:1 1 100%}
  .ag-row>.btn,.ag-row>form .ag-member-btn,.ag-row>form .btn{justify-content:center;width:100%}
}