:root{
    --primary:#4f46e5;
    --secondary:#7c3aed;
    --accent:#06b6d4;

    --bg:#f4f7ff;
    --card:#ffffff;

    --text:#1f2937;
    --text-light:#64748b;

    --border:#e5e7eb;
}

/* ==========================
   Body
========================== */

body{
    background:
        linear-gradient(
            180deg,
            #eef2ff 0%,
            #f8fafc 100%
        );

    font-family:
        "Microsoft JhengHei",
        sans-serif;

    color:var(--text);
}

/* ==========================
   Card
========================== */

.setting-card{

    border:none;

    border-radius:24px;

    overflow:hidden;

    background:white;

    box-shadow:
        0 20px 60px rgba(79,70,229,.18);
   /* box-shadow:
        0 15px 45px rgba(79,70,229,.12);
	*/
    transition:.3s;
}
/*
.setting-card:hover{

    transform:translateY(-2px);

    box-shadow:
        0 20px 60px rgba(79,70,229,.18);
}
*/
/* ==========================
   Header
========================== */

.setting-header{

    background:
        linear-gradient(
            135deg,
            #4f46e5 0%,
            #7c3aed 50%,
            #06b6d4 100%
        );

    color:white;

    padding:30px;
}

.setting-header h2{

    margin:0;

    font-size:30px;

    font-weight:700;

    letter-spacing:1px;
}

/* ==========================
   Content
========================== */

.setting-body{
    padding:35px;
}

/* ==========================
   Label
========================== */

.form-label{

    font-weight:600;

    color:#374151;

    margin-bottom:8px;
}

/* ==========================
   Input
========================== */

.setting-input{

    border:2px solid #e5e7eb;

    border-radius:14px;

    background:#fafafa;

    transition:.25s;
}

.setting-input:focus{

    background:white;

    border-color:#4f46e5;

    box-shadow:
        0 0 0 5px rgba(79,70,229,.12);
}

/* ==========================
   Row
========================== */

.setting-row{

    padding:15px 0;

    border-bottom:1px solid #eef2ff;
}

.setting-row:last-child{
    border-bottom:none;
}

/* ==========================
   Section Title
========================== */

.section-title{

    font-size:22px;

    font-weight:700;

    color:#4f46e5;

    margin-bottom:18px;
}

/* ==========================
   Table
========================== */

.table{

    background:white;

    border-radius:18px;

    overflow:hidden;

    margin-bottom:0;
}

.table th{

    background:#eef2ff !important;

    color:#4338ca;

    font-weight:700;

    text-align:center;

    vertical-align:middle;
}

.table td{

    vertical-align:middle;

    line-height:1.8;
}

.table tbody tr{

    transition:.2s;
}

.table tbody tr:hover{

    background:#f8faff;
}

.table-bordered{

    border-color:#e5e7eb;
}

.table-bordered td,
.table-bordered th{

    border-color:#e5e7eb;
}

/* ==========================
   Radio
========================== */

.form-check-input[type="radio"]{

    width:26px;

    height:26px;

    cursor:pointer;
}

.form-check-input:checked{

    background-color:#4f46e5;

    border-color:#4f46e5;
}

.form-check-label{

    margin-left:6px;

    font-weight:500;
}

/* ==========================
   Version
========================== */

.version{
    background:#fff176;
    color:#d35400;
    font-weight:bold;
}

/* ==========================
   Highlight
========================== */
.highlight{
    background:#fff176;
    font-weight:bold;
}

.highlight_b{
	font-family:sans-serif;	
	color:#d35400;
    background:#fff176;
    font-weight:bold;
}	

.word_bold{
	font-family:sans-serif;
	font-weight:bold;
}

/* ==========================
   Remark
========================== */

textarea.setting-input{

    min-height:140px;

    resize:vertical;
}

/* ==========================
   Signature
========================== */

.sign-wrap{

    width:100%;

    height:60vh;

    max-height:420px;

    min-height:240px;

    position:relative;

    background:
        linear-gradient(
            135deg,
            #f8faff,
            #eef2ff
        );

    border-radius:20px;

    padding:10px;
}

canvas{

    display:block;

    width:100%;

    height:100%;

    background:white;

    border:none;

    border-radius:16px;

    box-shadow:
        inset 0 0 0 1px #e5e7eb;
}

#signHint{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    color:#94a3b8;

    pointer-events:none;

    font-size:18px;
}

/* ==========================
   Buttons
========================== */

.btn-primary{

    background:
        linear-gradient(
            135deg,
            #4f46e5,
            #7c3aed
        );

    border:none;

    border-radius:50px;

    min-width:240px;

    padding:14px 40px;

    font-size:18px;

    font-weight:700;

    box-shadow:
        0 8px 20px rgba(124,58,237,.25);
}

.btn-primary:hover{

    transform:translateY(-2px);

    box-shadow:
        0 15px 30px rgba(124,58,237,.35);
}

.btn-success{

    border-radius:30px;

    padding:8px 20px;

    font-weight:600;
}

/* ==========================
   Mobile
========================== */

@media (max-width:768px){

    .setting-body{
        padding:20px;
    }

    .setting-header{
        padding:22px;
    }

    .setting-header h2{
        font-size:22px;
    }

    .table{
        font-size:14px;
    }

    .form-check-inline{
        display:block;
        margin-bottom:8px;
    }

    td{
        word-break:break-word;
    }

    .btn-primary{
        width:100%;
        min-width:auto;
    }

    .sign-wrap{
        height:300px;
        min-height:220px;
    }
}

/* ==========================
   Landscape
========================== */

@media (orientation:landscape) and (max-width:1024px){

    .sign-wrap{
        height:220px;
    }

    .mobile-right{
        text-align:right;
    }
}