/* FASE 10.10.12 — area personale e profili staff */
.account-body{min-height:100dvh;background:radial-gradient(circle at 12% 0%,rgba(249,215,229,.68),transparent 31rem),radial-gradient(circle at 92% 12%,rgba(235,225,252,.62),transparent 30rem),linear-gradient(180deg,#fff9fb,#fff6f9 55%,#fffaf1)}
.account-shell{width:min(1220px,calc(100% - 28px));margin:18px auto 80px}
.account-topbar{position:sticky;z-index:30;top:12px;grid-template-columns:auto minmax(0,1fr) auto auto auto!important;gap:9px}
.account-nav{display:flex;align-items:center;justify-content:center;gap:5px;min-width:0}
.account-nav a{display:flex;align-items:center;gap:6px;padding:9px 11px;border-radius:13px;color:var(--muted);font-size:12px;font-weight:900;white-space:nowrap}
.account-nav a:hover{background:var(--pink-50);color:var(--pink-500)}
.account-header-identity{max-width:170px!important;pointer-events:none}
.account-main{margin-top:18px}
.account-loading{min-height:320px;padding:42px;display:flex;align-items:center;justify-content:center;gap:22px;text-align:left}
.account-loading h1{max-width:none;margin:7px 0 8px;font-size:clamp(32px,5vw,52px)}
.account-loading p{margin:0}
.account-loading.error{text-align:center}
.account-loading.error>div{max-width:620px}
.account-loading.error .button{margin-top:18px}
.account-loading-mark{width:72px;height:72px;flex:0 0 72px;border:7px solid var(--pink-50);border-top-color:var(--pink-500);border-radius:999px;animation:account-spin .85s linear infinite}
@keyframes account-spin{to{transform:rotate(360deg)}}
.account-content{display:grid;gap:18px}
.account-content[hidden],.account-staff-panel[hidden]{display:none!important}

.account-overview{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(430px,.96fr);gap:24px;padding:clamp(24px,4vw,40px);background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,245,250,.93) 54%,rgba(255,249,237,.94))}
.account-overview::before{content:"";position:absolute;z-index:-1;right:-90px;top:-130px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(238,178,208,.30),transparent 68%)}
.account-overview-main{display:grid;grid-template-columns:104px minmax(0,1fr);gap:20px;align-items:center;min-width:0}
.account-overview-avatar{width:104px;height:104px;display:grid;place-items:center;border:1px solid rgba(239,194,211,.92);border-radius:34px;background:linear-gradient(145deg,#f9d9e7,#fff2da 52%,#e9e0fa);box-shadow:0 18px 34px rgba(117,78,84,.13);color:var(--choco);font-family:Georgia,serif;font-size:40px;font-weight:950;letter-spacing:-.04em}
.account-overview-copy{min-width:0}
.account-overview-copy h1{max-width:none;margin:4px 0 4px;font-size:clamp(36px,5vw,60px);line-height:1.02;overflow-wrap:anywhere}
.account-overview-copy>p{margin:0;color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.account-badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.account-status-badge{display:inline-flex;align-items:center;min-height:29px;padding:5px 10px;border:1px solid #d8eadb;border-radius:999px;background:#f4fff6;color:#5f7c65;font-size:10px;font-weight:950;text-transform:uppercase;letter-spacing:.04em}
.account-status-badge.role{border-color:#edd8e1;background:#fff6fa;color:var(--pink-500)}
.account-status-badge.role[data-role="moderator"]{border-color:#dcd1ee;background:#f7f2ff;color:#785ba0}
.account-status-badge.role[data-role="editor"]{border-color:#cce5dd;background:#f1fcf8;color:#487b6d}
.account-status-badge.role[data-role="admin"]{border-color:#f1d2bc;background:#fff7ef;color:#9a6241}
.account-status-badge.role[data-role="owner"]{border-color:#eacdc3;background:linear-gradient(135deg,#fff5e7,#fff2f8);color:#925250}
.account-status-badge.pending{border-color:#efd8bc;background:#fff9ed;color:#987244}
.account-overview-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-self:stretch}
.account-stat{min-width:0;padding:17px 15px;border:1px solid rgba(239,217,225,.95);border-radius:20px;background:rgba(255,255,255,.76);display:flex;flex-direction:column;justify-content:center;box-shadow:0 8px 24px rgba(117,78,84,.06)}
.account-stat small{color:var(--pink-500);font-size:9px;font-weight:950;text-transform:uppercase;letter-spacing:.05em}
.account-stat strong{margin:8px 0 3px;color:var(--choco);font-family:Georgia,serif;font-size:clamp(20px,2.5vw,31px);line-height:1;overflow-wrap:anywhere}
.account-stat span{color:var(--muted);font-size:10px;line-height:1.35}

.account-settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.account-section-card{padding:clamp(21px,3vw,30px);min-width:0}
.account-section-head{display:grid;grid-template-columns:54px minmax(0,1fr);gap:13px;align-items:center}
.account-section-head h2{margin:3px 0 3px;font-size:27px}
.account-section-head p{margin:0;font-size:12px;line-height:1.5}
.account-section-icon{width:54px;height:54px;padding:5px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(135deg,var(--pink-50),#fff8ed)}
.account-section-icon.security{background:linear-gradient(135deg,#eff8ed,#fff9ed)}
.account-section-icon .ui-icon{width:100%;height:100%;border-radius:14px}
.account-profile-form-v2{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:end;margin-top:22px}
.account-profile-form-v2 label{display:grid;gap:6px;min-width:0}
.account-profile-form-v2 label>span{color:var(--choco-soft);font-size:10px;font-weight:950;text-transform:uppercase;letter-spacing:.05em}
.account-profile-form-v2 input{width:100%;min-height:48px;padding:0 13px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--text);font:inherit;outline:none}
.account-profile-form-v2 input:focus{border-color:var(--pink-300);box-shadow:0 0 0 4px rgba(239,159,189,.12)}
.account-profile-form-v2 button:disabled{opacity:.6;cursor:wait}
.account-inline-status{display:block;min-height:19px;margin-top:8px;color:var(--pink-500);font-size:11px;font-weight:850}
.account-readonly-field{display:grid;gap:4px;margin-top:22px;padding:15px 16px;border:1px solid var(--line);border-radius:17px;background:linear-gradient(135deg,#fffafb,#fffdf7)}
.account-readonly-field small{color:var(--pink-500);font-size:9px;font-weight:950;text-transform:uppercase;letter-spacing:.05em}
.account-readonly-field strong{color:var(--choco);font-size:14px;overflow-wrap:anywhere}
.account-readonly-field span{color:var(--muted);font-size:11px;line-height:1.45}
.account-security-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.account-security-actions .button{width:100%}

.account-favorites-card{padding:clamp(22px,3.4vw,34px)}
.account-favorites-head{display:flex;align-items:center;justify-content:space-between;gap:18px}
.account-favorites-head h2{margin:3px 0 2px;font-size:30px}
.account-favorites-head p{margin:0;font-size:12px}
.account-favorites-grid-v2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-top:18px}
.account-favorite-card-v2{display:grid;grid-template-columns:106px minmax(0,1fr) 28px;gap:12px;align-items:center;min-width:0;min-height:112px;padding:8px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.86);color:inherit;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.account-favorite-card-v2:hover{transform:translateY(-2px);border-color:var(--pink-200);box-shadow:0 12px 27px rgba(117,78,84,.09)}
.account-favorite-art{width:106px;height:96px;overflow:hidden;border-radius:15px;background:linear-gradient(135deg,var(--pink-50),#fff6e9)}
.account-favorite-art img{width:100%;height:100%;display:block;object-fit:cover}
.account-favorite-copy{display:grid;gap:3px;min-width:0}
.account-favorite-copy small{color:var(--pink-500);font-size:9px;font-weight:950;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-favorite-copy strong{color:var(--choco);font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-favorite-copy>span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;color:var(--muted);font-size:11px;line-height:1.45}
.account-favorite-arrow{width:28px;height:28px;display:grid;place-items:center;border-radius:10px;background:var(--pink-50);color:var(--pink-500);font-weight:950}
.account-favorites-empty{grid-column:1/-1;display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:14px;align-items:center;padding:18px;border:1px dashed var(--line);border-radius:20px;background:#fffafb}
.account-favorites-empty>.ui-icon{width:58px;height:58px;border-radius:18px}
.account-favorites-empty strong{color:var(--choco);font-size:17px}
.account-favorites-empty p{margin:4px 0 0;font-size:12px}

.account-staff-panel{--staff-soft:#f8f2ff;--staff-line:#dfd2ef;--staff-accent:#8a68ae;--staff-deep:#563d70;--staff-copy:#6d5a7a;--staff-glow:rgba(138,104,174,.18);--staff-mark:#eee5f7;--staff-shadow:rgba(138,104,174,.16);position:relative;isolation:isolate;overflow:hidden;padding:clamp(23px,3.5vw,34px);border-color:var(--staff-line);background:linear-gradient(135deg,rgba(255,255,255,.98),var(--staff-soft))}
.account-staff-panel::after{content:"";position:absolute;z-index:-1;right:-70px;top:-100px;width:310px;height:310px;border-radius:50%;background:radial-gradient(circle,var(--staff-glow),transparent 68%)}
.account-staff-panel[data-role="editor"]{--staff-soft:#effaf6;--staff-line:#cbe4da;--staff-accent:#57907e;--staff-deep:#315f52;--staff-copy:#55756c;--staff-glow:rgba(87,144,126,.18);--staff-mark:#e2f2ec;--staff-shadow:rgba(87,144,126,.16)}
.account-staff-panel[data-role="admin"]{--staff-soft:#fff4e9;--staff-line:#edd1bb;--staff-accent:#bd7650;--staff-deep:#77452f;--staff-copy:#806252;--staff-glow:rgba(189,118,80,.18);--staff-mark:#f8e8dc;--staff-shadow:rgba(189,118,80,.16)}
.account-staff-panel[data-role="owner"]{--staff-soft:#fff2ed;--staff-line:#e9cbc0;--staff-accent:#b76567;--staff-deep:#793f45;--staff-copy:#805c60;--staff-glow:rgba(183,101,103,.18);--staff-mark:#f7e2df;--staff-shadow:rgba(183,101,103,.16)}
.account-staff-head{display:grid;grid-template-columns:66px minmax(0,1fr) auto;gap:16px;align-items:center}
.account-staff-icon{width:66px;height:66px;padding:6px;border:1px solid var(--staff-line);border-radius:22px;background:rgba(255,255,255,.78);box-shadow:0 12px 26px var(--staff-shadow)}
.account-staff-icon .ui-icon{width:100%;height:100%;border-radius:17px}
.account-staff-head h2{margin:4px 0 4px;color:var(--staff-deep);font-size:clamp(27px,3.6vw,38px)}
.account-staff-head p{max-width:70ch;margin:0;color:var(--staff-copy);font-size:12px;line-height:1.55}
.account-staff-head .eyebrow{color:var(--staff-accent)}
.staff-role-badge{align-self:start;min-height:32px;padding:7px 11px;border:1px solid var(--staff-line);border-radius:999px;background:rgba(255,255,255,.78);color:var(--staff-deep);font-size:10px;font-weight:950;text-transform:uppercase;letter-spacing:.05em}
.staff-permissions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:22px}
.staff-permission{display:grid;grid-template-columns:28px minmax(0,1fr);gap:9px;align-items:center;min-width:0;padding:12px;border:1px solid var(--staff-line);border-radius:17px;background:rgba(255,255,255,.74)}
.staff-permission-mark{width:28px;height:28px;display:grid;place-items:center;border-radius:10px;background:var(--staff-mark)}
.staff-permission.active .staff-permission-mark::after{content:"";width:7px;height:12px;margin-top:-3px;border-right:3px solid var(--staff-accent);border-bottom:3px solid var(--staff-accent);transform:rotate(42deg)}
.staff-permission.inactive{opacity:.5;filter:saturate(.45)}
.staff-permission.inactive .staff-permission-mark::after{content:"";width:10px;height:2px;border-radius:2px;background:var(--staff-accent)}
.staff-permission div{min-width:0;display:grid;gap:2px}
.staff-permission strong{color:var(--staff-deep);font-size:11px;line-height:1.25}
.staff-permission small{color:var(--muted);font-size:9px;line-height:1.3}
.staff-permission b{grid-column:2;color:var(--staff-accent);font-size:8px;text-transform:uppercase;letter-spacing:.05em}
.staff-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.staff-actions .button.primary{background:var(--staff-accent);box-shadow:0 9px 20px var(--staff-shadow)}
.staff-actions .button.soft{border-color:var(--staff-line);background:rgba(255,255,255,.72);color:var(--staff-deep)}

@media(max-width:1000px){
  .account-overview{grid-template-columns:1fr}
  .account-overview-stats{min-height:122px}
  .staff-permissions{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .account-topbar{grid-template-columns:auto minmax(0,1fr) auto auto!important}
  .account-nav{display:none}
  .account-topbar .account-header-identity{grid-column:2!important}
  .account-topbar .quick-logout-button{grid-column:3!important}
  .account-topbar .account-home-button{grid-column:4!important}
  .account-settings-grid{grid-template-columns:1fr}
  .account-favorites-grid-v2{grid-template-columns:1fr}
}
@media(max-width:720px){
  .account-shell{width:min(100% - 14px,720px);margin-top:8px;margin-bottom:100px}
  .account-topbar{position:static;grid-template-columns:auto minmax(0,1fr) auto!important;padding:9px;border-radius:22px}
  .account-home-button{display:none!important}
  .account-topbar .account-header-identity{grid-column:2!important}
  .account-topbar .quick-logout-button{grid-column:3!important}
  .account-header-identity{justify-self:end;max-width:88px!important}
  .account-loading{min-height:280px;flex-direction:column;padding:28px;text-align:center}
  .account-overview{padding:23px 18px}
  .account-overview-main{grid-template-columns:76px minmax(0,1fr);gap:14px}
  .account-overview-avatar{width:76px;height:76px;border-radius:25px;font-size:31px}
  .account-overview-copy h1{font-size:34px}
  .account-overview-stats{grid-template-columns:1fr 1fr;min-height:0}
  .account-stat:last-child{grid-column:1/-1}
  .account-staff-head{grid-template-columns:56px minmax(0,1fr)}
  .account-staff-icon{width:56px;height:56px;border-radius:19px}
  .staff-role-badge{grid-column:1/-1;justify-self:start}
  .staff-permissions{grid-template-columns:1fr 1fr}
  .account-favorites-head{align-items:flex-start;flex-direction:column}
}
@media(max-width:520px){
  .account-body .brand-copy span{display:none}
  .account-body .brand-copy strong{font-size:15px}
  .account-body .brand-mascot{width:38px;height:38px}
  .account-topbar{gap:5px;padding-inline:7px}
  .account-header-identity{max-width:74px!important;min-width:62px!important}
  .account-body .quick-logout-button{padding-inline:7px}
  .account-overview-main{grid-template-columns:64px minmax(0,1fr)}
  .account-overview-avatar{width:64px;height:64px;border-radius:21px;font-size:26px}
  .account-overview-copy h1{font-size:30px}
  .account-overview-copy>p{font-size:11px}
  .account-overview-stats{grid-template-columns:1fr}
  .account-stat:last-child{grid-column:auto}
  .account-section-card,.account-favorites-card,.account-staff-panel{padding:19px 15px}
  .account-section-head{grid-template-columns:46px minmax(0,1fr)}
  .account-section-icon{width:46px;height:46px;border-radius:15px}
  .account-section-head h2{font-size:23px}
  .account-profile-form-v2{grid-template-columns:1fr}
  .account-profile-form-v2 .button{width:100%}
  .account-security-actions{grid-template-columns:1fr}
  .staff-permissions{grid-template-columns:1fr}
  .staff-actions{display:grid;grid-template-columns:1fr}
  .staff-actions .button{width:100%}
  .account-favorite-card-v2{grid-template-columns:82px minmax(0,1fr);min-height:96px}
  .account-favorite-art{width:82px;height:80px}
  .account-favorite-arrow{display:none}
  .account-favorites-empty{grid-template-columns:48px minmax(0,1fr)}
  .account-favorites-empty>.ui-icon{width:48px;height:48px}
  .account-favorites-empty .button{grid-column:1/-1;width:100%}
}
