:root{
    --logo-blue:#2563eb;
    --blue-dark:#1d4ed8;

    --bg:#f6f7fb;
    --surface:#ffffff;
    --border:#e5e7eb;

    --text:#0f172a;
    --muted:#64748b;

    --success:#22c55e;
    --danger:#ef4444;

    --radius:14px;

    accent-color:var(--logo-blue);
}

*{
    box-sizing:border-box;
}

html,body{
    margin:0;
    padding:0;
}

body{
    font-family:verdana,arial,sans-serif,helvetica;
    background:var(--bg);
    color:var(--text);
    line-height:1.5;
}

a{
    color:var(--logo-blue);
    text-decoration:none;
}

a:hover{
    text-decoration:underline;
}


main{
    max-width:1100px;
    margin:20px auto;
    padding:16px;

    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);

    box-shadow:0 10px 30px rgba(0,0,0,0.05);
}


button,
.login_btn,
.signup_btn{
    border:0;
    border-radius:10px;
    padding:10px 14px;
    cursor:pointer;
    font-weight:600;
    transition:.15s ease;
}

.login_btn,
.signup_btn{
    background:var(--logo-blue);
    color:white;
}

.login_btn:hover,
.signup_btn:hover,
button:hover{
    background:var(--blue-dark);
    transform:translateY(-1px);
}


.spa,
.specials,
.new-people,
.profile-summary,
.info-box,
.topic-box,
.reply-box,
.home-actions,
.statistics,
.indie-box,
.box{

    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);

    box-shadow:0 4px 12px rgba(0,0,0,0.04);

    transition:.15s ease;
}

.spa:hover,
.specials:hover,
.new-people:hover,
.topic-box:hover,
.reply-box:hover{
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
    transform:translateY(-2px);
}


.heading,
.home-actions .heading,
.profile .contact .heading,
.setting-section .heading,
.statistics .heading,
.box h4,
.new-people .top{
    font-weight:600;
    padding:10px 12px;

    background:var(--bg);
    border-bottom:1px solid var(--border);

    color:var(--text);
}

input,
textarea,
select{
    width:100%;
    padding:10px 12px;

    border-radius:10px;
    border:1px solid var(--border);

    font-family:inherit;

    transition:.15s ease;
}

input:focus,
textarea:focus,
select:focus{
    outline:none;
    border-color:var(--logo-blue);
    box-shadow:0 0 0 3px rgba(37,99,235,0.15);
}


table{
    width:100%;
    border-collapse:collapse;
}

td,th{
    padding:8px;
    border-bottom:1px solid var(--border);
}


.profile .friends .person{
    padding:8px;
    border-radius:10px;
    transition:.15s ease;
}

.profile .friends .person:hover{
    background:#f1f5f9;
}


img{
    max-width:100%;
    display:block;
    border-radius:10px;
}

.welcome{
    background:#eef2ff;
    border:1px solid #dbeafe;
    padding:12px;
    border-radius:12px;
    margin-bottom:12px;
}

.error{
    background:#fef2f2;
    border:1px solid #fecaca;
    color:#991b1b;

    padding:12px;
    border-radius:12px;
    margin-bottom:12px;
}

.center{text-align:center;}
.hidden{display:none!important;}

.text-red{color:var(--danger);}
.text-green{color:var(--success);}
.text-muted{color:var(--muted);}


@media(max-width:768px){
    main{
        margin:10px;
        padding:12px;
    }
}