/* ARKsite — accesso e progetti: stessa voce della home, vetro sopra fondo caldo */
[hidden]{display:none !important}
.page{position:relative; z-index:1; min-height:100vh; padding:88px 20px 60px}
body.scroll{overflow:auto}
.card{background:var(--glass); border:1px solid var(--line); border-radius:18px; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:0 2px 6px rgba(20,20,18,.05), 0 24px 60px -28px rgba(20,20,18,.35)}

/* ---------- accesso ---------- */
.auth{width:100%; max-width:400px; margin:0 auto; padding:28px 26px 24px}
.auth h2{margin:0 0 4px; font-size:24px; font-weight:650; letter-spacing:-.02em}
.auth .hint{margin:0 0 18px; font-size:13px; color:var(--ink-2); line-height:1.5}
.tabs{display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; border-radius:12px; background:rgba(127,127,120,.12); margin-bottom:18px}
.tabs button{height:34px; border:0; border-radius:9px; background:transparent; font:500 13px var(--sans); color:var(--ink-2); cursor:pointer}
.tabs button[aria-pressed="true"]{background:var(--acc); color:var(--acc-ink)}
.field{display:flex; flex-direction:column; gap:5px; margin-bottom:12px}
.field label{font-size:12px; color:var(--ink-2)}
.field input{height:42px; padding:0 12px; border-radius:10px; border:1px solid var(--line); background:rgba(255,255,255,.7); color:var(--ink); font:400 14px var(--sans); outline:none}
@media (prefers-color-scheme: dark){ .field input{background:rgba(0,0,0,.35)} }
.field input:focus{border-color:var(--ink-3)}
.check{display:flex; gap:9px; align-items:flex-start; font-size:12.5px; line-height:1.45; color:var(--ink-2); margin:4px 0 14px}
.check input{margin-top:2px}
.wide{width:100%; justify-content:center}
.or{display:flex; align-items:center; gap:10px; margin:16px 0; font:400 11px var(--mono); color:var(--ink-3)}
.or::before,.or::after{content:""; flex:1; height:1px; background:var(--line)}
.gbtn svg,.abtn svg{width:18px; height:18px}
.abtn{margin-top:8px; background:#000; color:#fff; border-color:#000}
@media (prefers-color-scheme: dark){ .abtn{background:#fff; color:#000; border-color:#fff} }
.msg{min-height:18px; margin:10px 0 0; font-size:12.5px; color:#b4432f}
.msg.ok{color:#3f8a5a}
.gift{display:flex; gap:10px; align-items:center; padding:10px 12px; margin-bottom:16px; border-radius:12px; background:rgba(201,138,30,.12); border:1px solid rgba(201,138,30,.35); font-size:12.5px; line-height:1.4}
.gift b{font-size:18px}
.fine{margin:14px 0 0; font-size:11.5px; color:var(--ink-3); text-align:center}
button.btn{cursor:pointer}
button.btn:disabled{opacity:.5; cursor:default; transform:none}

/* ---------- progetti ---------- */
.dash{max-width:1180px; margin:0 auto}
.dhead{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px}
.dhead h1{font-size:clamp(30px, 4vw, 44px); font-weight:650; letter-spacing:-.035em; line-height:1}
.dhead p{margin:8px 0 0; color:var(--ink-2); font-size:14px}
.pills{display:flex; gap:8px; flex-wrap:wrap}
.pill{display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 13px; border-radius:999px; background:var(--glass); border:1px solid var(--line);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); font-size:13px; font-weight:500; color:var(--ink); text-decoration:none}
.pill em{font:400 11px var(--mono); font-style:normal; color:var(--ink-3)}
.pill.pro{background:var(--acc); color:var(--acc-ink); border-color:var(--acc)}
.pill.pro em{color:inherit; opacity:.6}

.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:16px}
.proj{position:relative; display:flex; flex-direction:column; overflow:hidden; padding:0; text-decoration:none; color:inherit; transition:transform .18s ease, box-shadow .18s ease}
.proj:hover{transform:translateY(-2px)}
.proj .thumb{aspect-ratio:4/3; background:rgba(127,127,120,.12) center/cover no-repeat; border-bottom:1px solid var(--line)}
.proj .thumb.none{display:flex; align-items:center; justify-content:center; color:var(--ink-3); font:400 11px var(--mono)}
.proj .meta{padding:12px 14px 14px}
.proj b{display:block; font-size:14.5px; font-weight:600; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.proj span{display:block; margin-top:3px; font-size:12px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.proj time{display:block; margin-top:8px; font:400 10.5px var(--mono); color:var(--ink-3)}
.proj .menu{position:absolute; top:8px; right:8px; width:30px; height:30px; border-radius:50%; border:1px solid var(--line); background:var(--glass);
  backdrop-filter:blur(10px); color:var(--ink); cursor:pointer; opacity:0; transition:opacity .15s}
.proj:hover .menu,.proj .menu:focus{opacity:1}
@media (hover:none){ .proj .menu{opacity:1} }
.new{align-items:center; justify-content:center; min-height:250px; border-style:dashed; cursor:pointer; background:transparent; font:inherit; color:var(--ink)}
.new i{display:flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:50%; background:var(--acc); color:var(--acc-ink); font-style:normal; font-size:24px; margin-bottom:10px}
.new b{font-size:14.5px} .new span{font-size:12px; color:var(--ink-2); margin-top:3px}
.empty{grid-column:1/-1; padding:30px; text-align:center; color:var(--ink-2); font-size:14px}

.side{display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:16px; margin-top:28px}
.box{padding:20px 22px}
.box h3{margin:0 0 6px; font-size:15px; font-weight:650; letter-spacing:-.01em}
.box p{margin:0 0 14px; font-size:13px; color:var(--ink-2); line-height:1.5}
.copy{display:flex; gap:8px}
.copy input{flex:1; min-width:0; height:40px; padding:0 12px; border-radius:10px; border:1px solid var(--line); background:rgba(127,127,120,.08); color:var(--ink); font:400 12px var(--mono)}
.ledger{list-style:none; margin:0; padding:0; font-size:12.5px}
.ledger li{display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-top:1px solid var(--line)}
.ledger li:first-child{border-top:0}
.ledger em{font-style:normal; color:var(--ink-3); font:400 11px var(--mono)}
.ledger b{font-family:var(--mono); font-weight:500}
.ledger b.plus{color:#3f8a5a}

.acct{position:relative}
.acct > button{display:flex; align-items:center; gap:8px; height:38px; padding:0 6px 0 14px; border-radius:999px; border:1px solid var(--line); background:var(--glass);
  backdrop-filter:blur(14px); color:var(--ink); font:500 13px var(--sans); cursor:pointer}
.acct > button i{display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:var(--acc); color:var(--acc-ink); font-style:normal; font-size:12px; font-weight:600}
.drop{position:absolute; right:0; top:46px; min-width:220px; padding:6px; display:none; z-index:5}
.drop.on{display:block}
.drop .who{padding:8px 10px 10px; border-bottom:1px solid var(--line); margin-bottom:4px; font-size:12px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis}
.drop .who b{display:block; color:var(--ink); font-size:13px}
.drop button,.drop a{display:block; width:100%; text-align:left; padding:9px 10px; border:0; border-radius:8px; background:transparent; color:var(--ink); font:400 13px var(--sans); text-decoration:none; cursor:pointer}
.drop button:hover,.drop a:hover{background:rgba(127,127,120,.12)}
.top .right{display:flex; gap:8px; align-items:center}
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); padding:10px 16px; border-radius:999px; background:var(--acc); color:var(--acc-ink); font-size:13px; z-index:10; opacity:0; transition:opacity .25s; pointer-events:none}
.toast.on{opacity:1}
@media (max-width:640px){ .page{padding-top:76px} .dhead{align-items:flex-start} }