:root{
    --navy:#101a31;
    --navy-soft:#172541;
    --blue:#2563eb;
    --blue-soft:#eef4ff;
    --green:#0f9f75;
    --red:#dc4545;
    --orange:#e77817;
    --ink:#182235;
    --muted:#718096;
    --line:#e3e9f1;
    --surface:#fff;
    --page:#f3f6fa;
    --radius:14px;
}
*{box-sizing:border-box}
html{min-height:100%}
body{margin:0;min-height:100vh;background:var(--page);color:var(--ink);font-family:"Inter",Arial,sans-serif}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}

/* Login */
.auth-page{
    display:grid;
    place-items:center;
    padding:28px;
    background:
        radial-gradient(circle at 8% 12%,rgba(37,99,235,.13),transparent 28%),
        radial-gradient(circle at 94% 88%,rgba(15,159,117,.10),transparent 28%),
        #f4f7fb
}
.auth-card{
    width:min(980px,100%);
    min-height:600px;
    display:grid;
    grid-template-columns:1.08fr .92fr;
    overflow:hidden;
    border:1px solid #dce4ee;
    border-radius:22px;
    background:#fff;
    box-shadow:0 28px 80px rgba(15,30,55,.14)
}
.auth-brand{
    display:flex;
    flex-direction:column;
    padding:50px;
    color:#fff;
    background:linear-gradient(145deg,#101a31,#17376a);
    position:relative;
    overflow:hidden
}
.auth-brand:after{
    content:"";
    position:absolute;
    width:330px;
    height:330px;
    right:-170px;
    bottom:-160px;
    border:60px solid rgba(96,165,250,.09);
    border-radius:50%
}
.brand-lockup{display:flex;align-items:center;gap:13px;position:relative;z-index:1}
.brand-lockup b{display:block;font-size:20px}
.brand-lockup small{display:block;margin-top:3px;color:#9eb0c9;font-size:11px}
.brand-mark{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:12px;
    color:#fff;
    background:linear-gradient(135deg,#1bb88a,#307ae8);
    font-weight:900;
    letter-spacing:-1px;
    box-shadow:0 8px 22px rgba(27,184,138,.2)
}
.auth-copy{margin:auto 0 22px;position:relative;z-index:1}
.auth-kicker{display:inline-flex;align-items:center;gap:8px;color:#83e2c5;font-size:11px;font-weight:800;letter-spacing:.7px}
.auth-copy h1{max-width:470px;margin:17px 0 15px;font-size:42px;line-height:1.08;letter-spacing:-1.8px}
.auth-copy p{max-width:470px;margin:0;color:#c2cee0;line-height:1.7;font-size:14px}
.auth-features{display:grid;gap:11px;position:relative;z-index:1;color:#dbe5f2;font-size:13px}
.auth-features span{display:flex;align-items:center;gap:9px}
.auth-features i{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;color:#6de0bd;background:rgba(27,184,138,.14);font-size:10px}
.auth-form{padding:55px 48px;display:flex;flex-direction:column;justify-content:center}
.auth-form h2{margin:0 0 8px;font-size:27px;letter-spacing:-.6px}
.auth-form>p{margin:0 0 28px;color:var(--muted);font-size:14px}
.auth-form label{display:block;margin:15px 0 7px;font-size:13px;font-weight:750;color:#334155}
.field-wrap{position:relative}
.field-wrap i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#9ba8b8}
.field-wrap input{
    width:100%;
    min-height:48px;
    padding:12px 14px 12px 42px;
    border:1px solid #ced8e5;
    border-radius:10px;
    outline:none;
    background:#fbfcfe
}
.field-wrap input:focus{border-color:#6292ee;box-shadow:0 0 0 4px rgba(37,99,235,.08);background:#fff}
.primary-button{
    width:100%;
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-top:22px;
    border:0;
    border-radius:10px;
    color:#fff;
    background:linear-gradient(135deg,#2868e8,#2056c7);
    font-weight:800;
    cursor:pointer;
    box-shadow:0 10px 20px rgba(37,99,235,.18)
}
.auth-links{display:flex;justify-content:center;gap:20px;margin-top:20px;color:#315d9e;font-size:13px;font-weight:750}
.auth-links.single{justify-content:center}
.auth-links a:hover{text-decoration:underline}
.field-help{display:block;margin-top:7px;color:var(--muted);font-size:11px;line-height:1.5}
.honeypot-field{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.form-alert{padding:11px 12px;border-radius:8px;font-size:13px;line-height:1.45}
.form-alert.error{background:#fff0ef;color:#a92f2b;border:1px solid #f3d2d0}
.form-alert.warning{background:#fff8e8;color:#8c5a08;border:1px solid #efdeb5}
.form-alert.success{background:#eaf9f4;color:#087657;border:1px solid #ccecdf}
.mobile-brand{display:none}
.auth-card-compact{min-height:520px}

/* Main shell */
.panel-shell{min-height:100vh;display:grid;grid-template-columns:248px minmax(0,1fr)}
.panel-sidebar{
    height:100vh;
    position:sticky;
    top:0;
    display:flex;
    flex-direction:column;
    padding:20px 14px;
    color:#fff;
    background:linear-gradient(180deg,#101a31,#0b1426)
}
.sidebar-brand{display:flex;align-items:center;gap:11px;padding:3px 7px 24px}
.sidebar-brand b{display:block;font-size:17px}
.sidebar-brand small{display:block;margin-top:3px;color:#9aaac0;font-size:11px}
.nav-group-title{padding:12px 10px 6px;color:#7f92ad;font-size:11px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase}
.panel-nav{display:grid;gap:3px}
.panel-nav a{
    min-height:42px;
    display:flex;
    align-items:center;
    gap:11px;
    padding:10px 11px;
    border-radius:9px;
    color:#b8c5d8;
    font-size:14px;
    font-weight:650;
    transition:.15s
}
.panel-nav a:hover,.panel-nav a.active{color:#fff;background:rgba(255,255,255,.08)}
.panel-nav i{width:19px;text-align:center;color:#7796c2}
.panel-nav a.active i{color:#70a5ff}
.sidebar-footer{margin-top:auto;display:grid;gap:7px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08)}
.sidebar-footer .invoice-link{color:#fff;background:linear-gradient(135deg,#2465d8,#17489c)}
.sidebar-footer .logout-link{color:#f0b3b3}
.panel-main{min-width:0}
.panel-topbar{
    min-height:68px;
    position:sticky;
    top:0;
    z-index:50;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:11px 25px;
    border-bottom:1px solid var(--line);
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(10px)
}
.page-title b{display:block;font-size:17px;letter-spacing:-.3px}
.page-title small{display:block;margin-top:3px;color:var(--muted);font-size:12px}
.account-box{display:flex;align-items:center;gap:10px}
.account-box{padding:6px 8px;border-radius:11px;transition:.15s}
.account-box:hover{background:#f1f5fa}
.account-copy{text-align:right}
.account-copy b{display:block;font-size:14px}
.account-copy small{display:block;margin-top:2px;color:var(--muted);font-size:11px}
.account-avatar{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;color:#fff;background:#244f9f;font-weight:800}
.panel-content{max-width:1540px;margin:0 auto;padding:22px 24px 45px}
.compact-status{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    margin-bottom:20px
}
.status-card{
    display:flex;
    align-items:center;
    gap:12px;
    min-height:80px;
    padding:14px;
    border:1px solid var(--line);
    border-radius:12px;
    background:#fff;
    box-shadow:0 3px 12px rgba(21,37,63,.035)
}
.status-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;background:var(--blue-soft);color:var(--blue)}
.status-card.green .status-icon{background:#eaf9f4;color:var(--green)}
.status-card.orange .status-icon{background:#fff4e8;color:var(--orange)}
.status-card.gray .status-icon{background:#f0f3f7;color:#64748b}
.status-card b{display:block;font-size:17px}
.status-card small{display:block;margin-top:3px;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.4px}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:18px;margin:22px 0 11px}
.section-heading h2{margin:0;font-size:17px;letter-spacing:-.3px}
.section-heading p{margin:4px 0 0;color:var(--muted);font-size:12px}
.section-heading span{color:var(--muted);font-size:12px}
.market-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.market-card{
    min-width:0;
    padding:14px;
    border:1px solid var(--line);
    border-radius:12px;
    background:#fff;
    transition:.15s;
    box-shadow:0 3px 12px rgba(21,37,63,.025)
}
.market-card:hover{transform:translateY(-2px);border-color:#cbd7e6;box-shadow:0 10px 24px rgba(21,37,63,.07)}
.market-head{display:flex;align-items:center;justify-content:space-between;gap:9px}
.market-name{display:flex;align-items:center;gap:9px;min-width:0;font-size:14px;font-weight:800}
.market-logo{width:33px;height:33px;display:grid;place-items:center;flex:0 0 auto;border-radius:9px;color:#fff}
.count-badge{min-width:62px;padding:4px 7px;border-radius:999px;background:#f1f4f8;color:#788699;text-align:center;font-size:11px;font-weight:800}
.count-badge.has-data{background:#e8f8f1;color:#087657}
.market-card p{min-height:38px;margin:11px 0;color:var(--muted);font-size:12px;line-height:1.55}
.market-action{display:flex;align-items:center;justify-content:space-between;padding-top:10px;border-top:1px solid #eef2f6;color:#334155;font-size:12px;font-weight:800}
.market-action i{color:#9ba9b9}
.tool-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.tool-card{
    min-height:104px;
    display:flex;
    gap:12px;
    padding:15px;
    border:1px solid var(--line);
    border-radius:12px;
    background:#fff;
    transition:.15s
}
.tool-card:hover{border-color:#cbd7e6;box-shadow:0 9px 22px rgba(21,37,63,.06)}
.tool-icon{width:39px;height:39px;display:grid;place-items:center;flex:0 0 auto;border-radius:10px;background:#eef4ff;color:#2460ce}
.tool-card h3{margin:1px 0 5px;font-size:14px}
.tool-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.tool-card .state-off{display:inline-flex;margin-top:7px;padding:3px 7px;border-radius:999px;background:#f1f3f6;color:#6d7a89;font-size:10px;font-weight:800}
.tool-card .state-on{background:#e7f8f1;color:#087657}
.panel-footer{padding:24px 0 0;text-align:center;color:#9aa6b5;font-size:11px}

/* User and license management */
.management-page{background:var(--page)}
.management-wrap{max-width:1380px;margin:0 auto;padding:26px}
.management-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:16px}
.management-head h1{margin:0;font-size:23px}
.management-head p{margin:5px 0 0;color:var(--muted);font-size:13px}
.action-row{display:flex;gap:8px;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:9px 13px;border:0;border-radius:9px;background:var(--blue);color:#fff;font-size:13px;font-weight:800;cursor:pointer}
.button.secondary{background:#fff;color:#40516a;border:1px solid var(--line)}
.button.danger{background:var(--red)}
.button.success{background:var(--green)}
.summary-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin-bottom:15px}
.summary-box{padding:15px;border:1px solid var(--line);border-radius:11px;background:#fff}
.summary-box span{display:block;color:var(--muted);font-size:11px;text-transform:uppercase}
.summary-box b{display:block;margin-top:5px;font-size:22px}
.management-card{overflow:hidden;border:1px solid var(--line);border-radius:13px;background:#fff;box-shadow:0 5px 16px rgba(21,37,63,.035)}
.management-table{width:100%;border-collapse:collapse;min-width:1000px}
.management-table th,.management-table td{padding:12px 14px;text-align:left;border-bottom:1px solid #ebf0f5}
.management-table th{background:#f8fafc;color:#718096;font-size:11px;text-transform:uppercase;letter-spacing:.5px}
.management-table td{font-size:13px}
.management-table td b{display:block}
.management-table td small{display:block;margin-top:3px;color:var(--muted)}
.pill{display:inline-flex;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:800}
.pill.admin,.pill.active,.pill.unlimited{background:#e9f8f2;color:#087657}
.pill.trial{background:#fff3df;color:#a56508}
.pill.expired,.pill.suspended{background:#fff0ef;color:#ae3530}
.pill.legacy{background:#edf3fb;color:#42658e}
.table-scroll{overflow:auto}
.form-panel{max-width:760px;margin:28px auto;padding:24px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 12px 30px rgba(21,37,63,.06)}
.form-panel h1{margin:0;font-size:22px}
.form-panel>p{margin:6px 0 22px;color:var(--muted);font-size:13px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.form-field.full{grid-column:1/-1}
.form-field label{display:block;margin-bottom:6px;color:#40516a;font-size:12px;font-weight:800}
.form-field input,.form-field select,.form-field textarea{
    width:100%;
    min-height:42px;
    padding:10px 11px;
    border:1px solid #ced8e5;
    border-radius:8px;
    background:#fbfcfe;
    outline:none
}
.form-field textarea{min-height:80px;resize:vertical}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:#6292ee;box-shadow:0 0 0 3px rgba(37,99,235,.08)}
.form-field small{display:block;margin-top:5px;color:var(--muted);font-size:11px;line-height:1.5}
.form-section{grid-column:1/-1;margin-top:7px;padding-top:17px;border-top:1px solid var(--line)}
.form-section h2{margin:0 0 4px;font-size:14px}
.form-section p{margin:0;color:var(--muted);font-size:11px}
.account-page{max-width:1120px}
.account-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin-bottom:16px}
.account-summary>div{padding:15px;border:1px solid var(--line);border-radius:11px;background:#fff}
.account-summary span{display:block;color:var(--muted);font-size:11px;text-transform:uppercase}
.account-summary b{display:block;margin-top:6px;font-size:15px;word-break:break-word}
.account-forms{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.account-forms .form-panel{width:100%;max-width:none;margin:0}
.account-forms .form-panel h2{margin:0;font-size:18px}
.account-forms .form-panel>p{margin:6px 0 20px;color:var(--muted);font-size:12px}

@media(max-width:1180px){
    .market-grid,.tool-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .compact-status{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
    .panel-shell{grid-template-columns:1fr}
    .panel-sidebar{height:auto;position:static;padding:12px}
    .sidebar-brand{padding-bottom:12px}
    .panel-nav{display:flex;overflow:auto}
    .panel-nav a{white-space:nowrap}
    .nav-group-title{display:none}
    .sidebar-footer{display:none}
    .market-grid,.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .auth-card{grid-template-columns:1fr;min-height:0}
    .auth-brand{display:none}
    .mobile-brand{display:flex;align-items:center;gap:10px;margin-bottom:28px}
    .account-forms{grid-template-columns:1fr}
}
@media(max-width:620px){
    .auth-page{padding:14px}
    .auth-form{padding:32px 23px}
    .panel-content,.management-wrap{padding:15px 11px 32px}
    .panel-topbar{padding:10px 12px}
    .account-copy{display:none}
    .compact-status,.market-grid,.tool-grid,.summary-row,.form-grid,.account-summary{grid-template-columns:1fr}
    .management-head{align-items:flex-start;flex-direction:column}
    .form-field.full,.form-section{grid-column:auto}
}

/* Ortak panel geçişleri: header akışında, kullanıcı alanının üzerine binmez. */
.module-quick-nav{display:flex;gap:6px;align-items:center;margin-left:auto;margin-right:12px;flex-wrap:wrap}.module-quick-nav a{padding:7px 9px;border:1px solid #dde5ec;border-radius:8px;background:#fff;color:#43566a;text-decoration:none;font-size:12px;font-weight:700}.module-quick-nav a:hover{background:#f3f7fa}@media(max-width:900px){.module-quick-nav{display:none}}