/* PIVOT Lab — Design System (PIVOT CI) */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root {
    --font-display: 'Outfit', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --bg: #000000;
    --surface-1: #0a0a0a;
    --surface-2: #111111;
    --surface-3: #1a1a1a;
    --text-primary: #ffffff;
    --text-secondary: rgba(255,255,255,0.75);
    --text-tertiary: rgba(255,255,255,0.5);
    --border: rgba(255,255,255,0.12);
    --border-hover: rgba(255,255,255,0.25);
    --accent: #ffffff;
    --radius: 0;
    --ease-out-expo: cubic-bezier(0.16,1,0.3,1);
}

html{height:100%}
body{min-height:100%;background:var(--bg);color:var(--text-primary);font-family:var(--font-body);line-height:1.5;-webkit-font-smoothing:antialiased}

/* ── Login Screen ── */
.login-screen{
    min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
    background:#000;position:relative;overflow:hidden;
}
.login-screen::before{
    content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:800px;height:800px;
    background:radial-gradient(ellipse at center, rgba(255,255,255,0.03) 0%, transparent 70%);
    pointer-events:none;
}

.login-card{
    width:100%;max-width:360px;position:relative;z-index:1;
    opacity:0;transform:translateY(40px);
    animation:fadeInUp 1s var(--ease-out-expo) 0.2s forwards;
}

.login-logo{display:flex;flex-direction:column;align-items:center;gap:16px;margin-bottom:48px}
.login-logo__img{height:20px;opacity:0.9}
.login-logo__divider{width:32px;height:1px;background:var(--border)}
.login-logo__sub{
    font-family:var(--font-display);font-size:11px;font-weight:600;
    letter-spacing:0.2em;text-transform:uppercase;color:var(--text-tertiary);
}

.login-field{margin-bottom:20px}
.login-field label{
    display:block;font-size:10px;font-weight:600;
    color:var(--text-tertiary);margin-bottom:8px;
    letter-spacing:0.14em;text-transform:uppercase;
}
.login-field input{
    width:100%;padding:14px 0;background:transparent;
    border:none;border-bottom:1px solid var(--border);
    color:var(--text-primary);font-family:var(--font-body);font-size:15px;
    outline:none;transition:border-color 0.4s var(--ease-out-expo);
    letter-spacing:0.01em;
}
.login-field input:focus{border-bottom-color:rgba(255,255,255,0.5)}
.login-field input::placeholder{color:var(--text-tertiary)}

.login-error{font-size:12px;color:#ff4444;min-height:24px;padding-top:4px}
.login-btn{
    width:100%;padding:16px;margin-top:8px;
    background:#fff;color:#000;border:none;
    font-family:var(--font-display);font-size:13px;font-weight:700;
    letter-spacing:0.08em;text-transform:uppercase;
    cursor:pointer;transition:all 0.4s var(--ease-out-expo);
}
.login-btn:hover{opacity:0.85;transform:translateY(-1px)}
.login-btn:disabled{opacity:0.3;cursor:not-allowed;transform:none}
.login-footer{
    margin-top:40px;font-size:10px;color:var(--text-tertiary);
    text-align:center;letter-spacing:0.06em;
}

/* ── Hub Navigation ── */
.hub-nav{
    display:flex;align-items:center;justify-content:space-between;
    padding:0 clamp(24px, 5vw, 80px);height:64px;
    background:transparent;border-bottom:1px solid var(--border);
    position:fixed;top:0;left:0;right:0;z-index:100;
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    background:rgba(0,0,0,0.8);
}
.hub-nav__left{display:flex;align-items:center;gap:16px}
.hub-nav__logo{height:16px;opacity:0.85}
.hub-nav__divider{width:1px;height:16px;background:var(--border)}
.hub-nav__badge{
    font-family:var(--font-display);font-size:11px;font-weight:700;
    letter-spacing:0.18em;text-transform:uppercase;color:var(--text-tertiary);
}
.hub-nav__right{display:flex;align-items:center;gap:20px}
.hub-nav__btn{
    display:flex;align-items:center;gap:6px;padding:8px 0;
    background:transparent;border:none;
    color:var(--text-secondary);font-family:var(--font-body);font-size:12px;
    letter-spacing:0.06em;cursor:pointer;transition:color 0.3s;
}
.hub-nav__btn:hover{color:var(--text-primary)}

/* ── Accounts Panel ── */
.accounts-overlay{
    position:fixed;inset:0;z-index:200;
    background:rgba(0,0,0,0.7);backdrop-filter:blur(8px);
    display:flex;align-items:center;justify-content:center;
    opacity:0;pointer-events:none;
    transition:opacity 0.35s var(--ease-out-expo);
}
.accounts-overlay.active{opacity:1;pointer-events:auto}
.accounts-overlay.active .accounts-panel{transform:translateY(0);opacity:1}

.accounts-panel{
    width:100%;max-width:560px;margin:24px;
    background:var(--surface-1);border:1px solid var(--border);
    transform:translateY(20px);opacity:0;
    transition:all 0.4s var(--ease-out-expo) 0.05s;
}

.accounts-panel__header{
    display:flex;align-items:center;justify-content:space-between;
    padding:24px 28px;border-bottom:1px solid var(--border);
}
.accounts-panel__header h2{
    font-family:var(--font-display);font-size:16px;font-weight:700;
    letter-spacing:0.02em;
}
.accounts-panel__close{
    width:32px;height:32px;display:flex;align-items:center;justify-content:center;
    background:transparent;border:1px solid var(--border);cursor:pointer;
    color:var(--text-tertiary);transition:all 0.3s;
}
.accounts-panel__close:hover{color:var(--text-primary);border-color:var(--border-hover)}

/* Form */
.accounts-form{padding:20px 28px;border-bottom:1px solid var(--border)}
.accounts-form__row{display:flex;gap:10px;align-items:flex-end}
.accounts-form__field{flex:1;display:flex;flex-direction:column;gap:6px}
.accounts-form__field--role{flex:0 0 100px}
.accounts-form__field label{
    font-size:9px;font-weight:600;letter-spacing:0.14em;
    text-transform:uppercase;color:var(--text-tertiary);
}
.accounts-form__field input,
.accounts-form__field select{
    width:100%;padding:10px 12px;
    background:var(--surface-2);border:1px solid var(--border);
    color:var(--text-primary);font-family:var(--font-body);font-size:13px;
    outline:none;transition:border-color 0.3s;
}
.accounts-form__field input:focus,
.accounts-form__field select:focus{border-color:var(--border-hover)}
.accounts-form__field input::placeholder{color:var(--text-tertiary);font-size:11px}
.accounts-form__field select{cursor:pointer;-webkit-appearance:none;appearance:none}
.accounts-form__field select option{background:var(--surface-2);color:var(--text-primary)}

.accounts-form__add{
    flex-shrink:0;display:flex;align-items:center;gap:6px;
    padding:10px 18px;background:#fff;color:#000;border:none;
    font-family:var(--font-display);font-size:11px;font-weight:700;
    letter-spacing:0.06em;text-transform:uppercase;
    cursor:pointer;transition:opacity 0.3s;
}
.accounts-form__add:hover{opacity:0.85}

.accounts-form__msg{
    min-height:20px;margin-top:10px;font-size:11px;
    letter-spacing:0.02em;transition:color 0.3s;
}
.accounts-form__msg--error{color:#ff4444}
.accounts-form__msg--ok{color:#4ADE80}

/* User List */
.accounts-list{max-height:320px;overflow-y:auto}
.accounts-item{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 28px;border-bottom:1px solid rgba(255,255,255,0.05);
    transition:background 0.2s;
}
.accounts-item:hover{background:rgba(255,255,255,0.02)}
.accounts-item--current{background:rgba(255,255,255,0.03)}
.accounts-item__info{display:flex;align-items:center;gap:10px}
.accounts-item__name{font-size:13px;font-weight:500;letter-spacing:0.01em}
.accounts-item__role{
    font-size:9px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
    padding:3px 10px;border:1px solid var(--border);color:var(--text-tertiary);
}
.accounts-item__role--admin{color:#4ADE80;border-color:rgba(74,222,128,0.2)}
.accounts-item__you{
    font-size:9px;font-weight:600;letter-spacing:0.08em;
    color:var(--text-tertiary);text-transform:uppercase;
}
.accounts-item__protected{
    font-size:9px;font-weight:600;letter-spacing:0.1em;
    color:var(--text-tertiary);text-transform:uppercase;
}
.accounts-item__delete{
    width:28px;height:28px;display:flex;align-items:center;justify-content:center;
    background:transparent;border:1px solid transparent;cursor:pointer;
    color:var(--text-tertiary);transition:all 0.3s;
}
.accounts-item__delete:hover{color:#ff4444;border-color:rgba(255,68,68,0.3)}

/* ── Hub Content ── */
.hub-content{
    max-width:1400px;margin:0 auto;
    padding:160px clamp(24px, 5vw, 80px) 80px;
}
.hub-header{
    margin-bottom:80px;
    opacity:0;transform:translateY(28px);
    animation:fadeInUp 0.7s var(--ease-out-expo) 0.1s forwards;
}
.hub-header h1{
    font-family:var(--font-display);font-size:clamp(32px, 4vw, 56px);
    font-weight:800;letter-spacing:-0.03em;line-height:1.1;
    margin-bottom:12px;
}
.hub-header p{font-size:clamp(13px, 1vw, 16px);color:var(--text-secondary);letter-spacing:0.01em}

.hub-grid{
    display:grid;grid-template-columns:1fr;gap:0;
    opacity:0;transform:translateY(28px);
    animation:fadeInUp 0.7s var(--ease-out-expo) 0.3s forwards;
}

/* ── Project Card (PIVOT style list) ── */
.project-card{
    display:grid;
    grid-template-columns:clamp(48px,6vw,80px) 1fr 1.4fr;
    gap:clamp(20px,3.5vw,60px);
    padding:48px 0;
    border-top:1px solid var(--border);
    text-decoration:none;color:inherit;
    align-items:start;
    transition:all 0.4s var(--ease-out-expo);
}
.project-card:last-child{border-bottom:1px solid var(--border)}
.project-card:hover{background:rgba(255,255,255,0.02)}
.project-card:hover .project-card__arrow{opacity:1;transform:translateX(0)}

.project-card__num{
    font-family:var(--font-display);font-size:12px;font-weight:600;
    letter-spacing:0.04em;color:var(--text-tertiary);padding-top:8px;
}

.project-card__main{display:flex;flex-direction:column;gap:6px}
.project-card__title{
    font-family:var(--font-display);font-size:clamp(22px,2.5vw,38px);
    font-weight:700;line-height:1.1;letter-spacing:-0.01em;
    -webkit-text-stroke:1px rgba(255,255,255,0.85);
    color:transparent;
    transition:color 0.4s var(--ease-out-expo);
}
.project-card:hover .project-card__title{color:#fff;-webkit-text-stroke:0}
.project-card__client{
    font-family:var(--font-display);font-size:14px;font-weight:500;
    letter-spacing:0.04em;color:var(--text-secondary);
}

.project-card__meta{display:flex;flex-direction:column;gap:16px;padding-top:6px}
.project-card__desc{
    font-size:clamp(13px,0.95vw,16px);line-height:1.7;
    color:var(--text-secondary);max-width:540px;
}
.project-card__bottom{display:flex;align-items:center;justify-content:space-between}
.project-card__tags{display:flex;gap:8px;flex-wrap:wrap}
.project-card__tag{
    font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;
    padding:5px 14px;border:1px solid var(--border);color:var(--text-secondary);
}
.project-card__status{
    font-size:11px;font-weight:700;text-transform:uppercase;
    letter-spacing:0.1em;padding:5px 14px;
}
.project-card__status--active{color:#4ADE80;border:1px solid rgba(74,222,128,0.25)}
.project-card__status--draft{color:var(--text-tertiary);border:1px solid var(--border)}

.project-card__arrow{
    display:flex;align-items:center;gap:6px;
    font-family:var(--font-display);font-size:11px;font-weight:600;
    letter-spacing:0.1em;text-transform:uppercase;color:var(--text-secondary);
    opacity:0;transform:translateX(-8px);
    transition:all 0.4s var(--ease-out-expo);
    margin-top:8px;
}

/* ── Hub Footer ── */
.hub-footer{
    text-align:center;padding:40px clamp(24px,5vw,80px);
    border-top:1px solid var(--border);margin-top:120px;
}
.hub-footer p{font-size:11px;color:var(--text-secondary);letter-spacing:0.08em;text-transform:uppercase}

/* ── Animations ── */
@keyframes fadeInUp{
    from{opacity:0;transform:translateY(28px);filter:blur(4px)}
    to{opacity:1;transform:translateY(0);filter:blur(0)}
}

/* ── Responsive ── */
@media(max-width:768px){
    .hub-content{padding:120px 24px 60px}
    .hub-header{margin-bottom:48px}
    .project-card{
        grid-template-columns:32px 1fr;
        gap:10px 14px;padding:32px 0;
    }
    .project-card__meta{grid-column:2}
    .login-card{max-width:100%;padding:0 8px}
}